kendoSparkline

[Devendra]

Hello,

We are trying to create the charts for below attached images(1,2 and 3) using kendoSparkline.

http://dojo.telerik.com/@devendra/oPOvI ] this is the sample one we created, but not close to what we want.

Can you please suggest on how we could develop charts which are attached herewith.

Do you know if we can increase the width of the column chart?

 

Best Regards,

Devendra

[Devendra]

I would like to add the text as well for these images. Please see the updated image attached here.

[Devendra]

Forgot to update the image.

[T. Tsonev]

Hello,

Please accept my apologies for the delayed response.

I'll start with the bar charts on the left. You can adjust their size freely using the chartArea.width setting. In addition, you can remove the empty space to the sides (gap):
    seriesDefaults: {
        gap: 0
    },
    chartArea: {
        width: 20
    }

This is the updated snippet.

The chart to the right should be possible to implement using plot bands and a line series showing only markers.
Also demonstrated in the snippet above.

Additional text should probably placed outside the chart and positioned using CSS.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Devendra]

No problem :) . this is great, thank you for your help. Could you provide little bit more about "Additional

text should probably placed outside the chart and positioned using CSS" and when i click on that can i show one more chart as popup?

It would be nice if could give us some more insights on how to implement this.

Best Regards,

Devendra

[T. Tsonev]

Hi,

My idea was to use plain HTML elements and position them using suitable markup and styles.
This should give you maximum control as opposed to trying to embed this content in the chart.

I've updated the snippet to illustrate, but it's a generic concept really. Use whatever styling fits your scenario.

Regards,
T. Tsonev
Telerik

 

 

[Devendra]

Thanks for the response. 

I made the few changes to my snippet.  Please see below one

http://dojo.telerik.com/@devendra/isiQO/24.

 When you click on one of the title it opens the popup, currently i have hard coded the values, but i would like to make it dynamically. Example, i click Title1, i need to populate the popups with different data. Can you please provide me an example snippet regarding this. 

Best Regards,

Devendra

 

[T. Tsonev]

Hi,

The chart will provide context for the seriesClick handler, but it can't do this automatically for external elements such as the title.

My recommendation is to attach data attributes to the title elements and use those to identify them. For example:
<td onclick="Popup(this)" data-id="1"><h3>Title1</h3></td>

function Popup(e) {
      var id = $(e).data("id");
      ...

Does this make sense?

Regards,
T. Tsonev
Telerik

 

 

[Devendra]

Could you please provide more insights on if i am getting data from a web service because here i might be having different set of data, how i can add the data for data attributes like you mentioned above?

Can you please provide a sample example here which i can use for my popups.

 

Best Regards,

Devendra

 

[T. Tsonev]

Hello,

Please, refer to the Binding to Remote Data example for an illustration on how to populate the sparklines with remote data.

Regards,
T. Tsonev
Telerik