This is a migrated thread and some comments may be shown as answers.

kendoSparkline

9 Answers 35 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Devendra
Top achievements
Rank 1
Devendra asked on 30 Jun 2015, 02:49 AM

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

9 Answers, 1 is accepted

Sort by
0
Devendra
Top achievements
Rank 1
answered on 01 Jul 2015, 05:59 AM
I would like to add the text as well for these images. Please see the updated image attached here.
0
Devendra
Top achievements
Rank 1
answered on 01 Jul 2015, 06:00 AM
Forgot to update the image.
0
T. Tsonev
Telerik team
answered on 02 Jul 2015, 09:19 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Devendra
Top achievements
Rank 1
answered on 02 Jul 2015, 10:02 AM

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

0
T. Tsonev
Telerik team
answered on 06 Jul 2015, 08:26 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Devendra
Top achievements
Rank 1
answered on 06 Jul 2015, 08:50 AM

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

 

0
T. Tsonev
Telerik team
answered on 08 Jul 2015, 08:07 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Devendra
Top achievements
Rank 1
answered on 08 Jul 2015, 08:46 AM

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

 

0
T. Tsonev
Telerik team
answered on 10 Jul 2015, 07:29 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Diagram
Asked by
Devendra
Top achievements
Rank 1
Answers by
Devendra
Top achievements
Rank 1
T. Tsonev
Telerik team
Share this question
or