adziu
Posts: 11
Joined: Wed Mar 27, 2024 10:44 am

How to add a chart below a KPI using connectors in Highcharts Dashboards?

Hi,

I am providing data for a KPI chart through a connector, as shown in the config below:

Code: Select all

type: 'KPI',
renderTo: 'dashboard-col-04',
connector: {
    id: 'Serie1',
    columnAssignment: [{
        seriesId: 'Serie1',
        data: ['time', 'value']
    }]
},
columnName: 'value',
Using the example from your demo on the page https://www.highcharts.com/docs/dashboa ... -component, how can I add a chart below the KPI using values from the connectors?

In your example, all values are hardcoded using the data attribute.
If there is any option to fix this problem, please provide an example using ReactJS.

Thank you!
User avatar
dawid.d
Site Moderator
Posts: 990
Joined: Thu Oct 06, 2022 11:31 am

Re: How to add a chart below a KPI using connectors in Highcharts Dashboards?

Hello,

Thanks for the question!

The main difference between a chart under KPI value and a Highcharts Component is how the data from the connector is sent to it. In Highcharts Component you can use Column Assignment. But the chart built in the KPI can get single data as a value. If the `linkedValueTo` option is enabled (it is enabled by default if there is a chart), it sends the value to a set point in a set series (by default, the first point of the first series ).

However, you can set Highcharts Component right below the KPI and style them to look like they are one component.

JS Demo: https://jsfiddle.net/BlackLabel/4et7uz3f/

I prepared the demo in JSFiddle because there will be indentical settings in React, but if you really need it in React, let me know whether you use a custom layout or generated one. I will prepare a suitable demo.

Additionally, if you have any suggestions on what we can change or add to the KPI, any feedback is very valuable!

Best regards
Dawid Draguła
Highcharts Developer
adziu
Posts: 11
Joined: Wed Mar 27, 2024 10:44 am

Re: How to add a chart below a KPI using connectors in Highcharts Dashboards?

Thank you for your help!
Dashboards are a new feature, but I am happy that IT support is top-notch.

However, I have another problem and have been struggling with it almost all day and it's connected with my previous question.
I have layouts side by side in a single row: layout1 | layout2.
How can I make layout1 occupy 2/3 of the available width of the parent and layout2 1/3?
I would like to achieve this using the configuration settings in the gui of the dashboard, not CSS.
I noticed that even in your demo with 3 columns - https://www.highcharts.com/docs/dashboa ... escription "Nested layout demo" it is not possible to set the width of each column separately - they always have equal widths.

This is problematic because even in editMode, when I set the layout width and save the config to the database, despite the 'width' parameter appearing after making changes in editMode, it has no effect, as if the parameter is not recognized.
User avatar
dawid.d
Site Moderator
Posts: 990
Joined: Thu Oct 06, 2022 11:31 am

Re: How to add a chart below a KPI using connectors in Highcharts Dashboards?

You're welcome!

Is there any specific reason you don't want to use CSS? One of the major changes introduced in version 2.0 was the change to full CSS styling. See the demo below.

Demo: https://jsfiddle.net/BlackLabel/zox937gr/

Or by "GUI" do you mean edit mode? Cell sizes can then be resized by dragging the resize handlers: https://jsfiddle.net/BlackLabel/xmLqe97y/

Let me know if it was helpful!
Best regards!
Dawid Draguła
Highcharts Developer
adziu
Posts: 11
Joined: Wed Mar 27, 2024 10:44 am

Re: How to add a chart below a KPI using connectors in Highcharts Dashboards?

Thank you! It's very helpful :)

Once again, I have another issue. In your modules, you get .svg icons from https://code.highcharts... What if I work in an environment without internet access or with a very strict security policy? I found two icons which I could override with CSS styles, but what about the others, like resize-handle.svg or add.svg?

I'd like to use all of icons locally (without internet connection)


Image
Attachments
Zrzut ekranu z 2024-06-25 15-56-59.png
Zrzut ekranu z 2024-06-25 15-56-59.png (16.95 KiB) Viewed 354 times
User avatar
dawid.d
Site Moderator
Posts: 990
Joined: Thu Oct 06, 2022 11:31 am

Re: How to add a chart below a KPI using connectors in Highcharts Dashboards?

Hi again!

We have an option called `iconsURLPrefix` where you can set your own path to SVG images.

Demo: https://jsfiddle.net/BlackLabel/q35vhxp2/
API Docs: https://api.highcharts.com/dashboards/# ... sURLPrefix

Hope it helps!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Dashboards”