Add interesting information to a column chart

5 posts, 1 answers
  1. Rajesh
    Rajesh avatar
    53 posts
    Member since:
    Jan 2014

    Posted 20 Nov 2014 Link to this post

    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
  2. Rajesh
    Rajesh avatar
    53 posts
    Member since:
    Jan 2014

    Posted 22 Nov 2014 in reply to Rajesh Link to this post

    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>
  3. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 24 Nov 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Rajesh
    Rajesh avatar
    53 posts
    Member since:
    Jan 2014

    Posted 26 Nov 2014 in reply to Iliana Nikolova Link to this post

    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
  5. Rajesh
    Rajesh avatar
    53 posts
    Member since:
    Jan 2014

    Posted 26 Nov 2014 in reply to Rajesh Link to this post

    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
Back to Top