[Solved] Add interesting information to a column chart

[Rajesh]

Hi,

I have a set of values that change over time that are being represented as a column type kendo-chart . The values are on the y axis and the date is on the x-axis as usually expected. I'd like to overlay this chart with additional information at intermediate date points. 

For instance if the column graph shows the cpu usage at different points in time today, I'd like to show a message on the time axis when an application was started. I will not have the cpu usage value at the time the application started. I'd like to however show it on the right instance on the graph.

I did look at the stock chart for this purpose but inferred that its only built for showing stock information. Its not possible to show a mouse over popup unless I have a value. The popup does not show up unless the high and low values are different.

Thanks,
Rajesh

[Rajesh]

Hi,

I am thinking I can have two series (one for the real data and another for the additional information). I'd like to have the second series have a transparent color so that its bars are not visible.  I'd like to customize the tooltip per series so that I could show the message on the second and the value on the first. I am unable to get it working with the following configuration.

<div kendo-chart="appMetadata.resourceUsageChart"
                                                 k-title="{ text: 'CPU consumption', visible: false }"
                                                 k-legend="{ visible: false }"
                                                 k-chart-area="{ background: '', height:200 }"
                                                 k-series-defaults="{ type: 'column', markers: { visible: true }}"
                                                 k-series="[
                                                     { field: 'cpu', name: 'CPU', categoryField: 'Date', color:'#d9ce68',
                                                        tooltip: {
                                                            visible: true,
                                                            format: '{0}',
                                                            template: ' #= dataItem.cpu #'
                                                            }
                                                     },
                                                     { field: 'message', name: '', categoryField: 'Date', color:'transparent',
                                                         tooltip: {
                                                            visible: true,
                                                            format: '{0}',
                                                            template: ' #= dataItem.cpu #'
                                                            }

                                                     }
                                                 ]"
                                                 k-category-axis="{ baseUnit: 'fit', labels: { step: 2} }"
                                                 k-data-source="appCpuAndEventsDataSource"
                                                 k-transitions="false"

                                            >
                                            </div>

[Iliana Dyankova]

Hi Rajesh,

I believe the used configuration does not work because the second series is bound to a string field ( the "message" field) while the chart expects a value field. In order to achieve the expected result I would suggest to bind both series to the same value field. For your convenience I prepared a basic example which demonstrates a possible implementation.

Regards,
Iliana Nikolova
Telerik

 

 

[Rajesh]

Thank you for the updated example.

Is it possible to overlay a scatter chart on a column chart to indicate these additional information ? Can I have two series with two chart types within the same div ?

Thanks,
Rajesh

[Rajesh]

With your inputs I have changed the chart to a scatter chart with one scatterLine and another scatter series. I am able to achieve the required results with this. Thanks for your help.

-Rajesh