Here is my code
My graph is not displaying please help
My graph is not displaying please help
<!DOCTYPE html><html><head><meta name="description" content="[chart]" /><script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script></head><body> <div id="chart"></div> <script> $(function() { var data = [ { "Date": "12/31/2007", "IndexValue": 190.68435691915832, }, { "Date": "1/1/2008", "IndexValue": 190.67087650872867, }, { "Date": "1/2/2008", "IndexValue": 190.67087650872867, }, { "Date": "1/3/2008", "IndexValue": 190.67087650872867, } ]; $("#chart").kendoChart({ theme: $(document).data("kendoSkin") || "default", title: { text: "Charge current vs. charge time" }, legend: { visible: true }, seriesDefaults: { type: "line" }, series: [{ name: "Date", field: "Date" }], valueAxis: { field: "IndexValue" }, tooltip: { visible: true, format: "{1}% in {0} minutes" } }); }); </script></body></html>8 Answers, 1 is accepted
0
Kaleswar
Top achievements
Rank 1
Rank 1
answered on 17 Dec 2012, 08:07 PM
now the graph is working. now my question how can we make X-axis value dynamic I have 5years data .
How can we set Dynamic x- axis Scale Range?
Here is my updated code
How can we set Dynamic x- axis Scale Range?
Here is my updated code
<!DOCTYPE html><html><head><meta name="description" content="[chart]" /><script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script></head><body> <div id="chart"></div> <script> $(function() { var seriesData1 = [ { "Date": "12/31/2007", "IndexValue": 190.68435691915832, }, { "Date": "1/1/2008", "IndexValue": 190.67087650872867, }, { "Date": "1/2/2008", "IndexValue": 190.67087650872867, }, { "Date": "1/3/2008", "IndexValue": 190.67087650872867, }, { "Date": "1/4/2008", "IndexValue": 190.67087650872867, }, { "Date": "1/5/2008", "IndexValue": 190.67087650872867, }, { "Date": "1/6/2008", "IndexValue": 190.67087650872867, }, { "Date": "1/7/2008", "IndexValue": 190.67087650872867, } , { "Date": "1/8/2008", "IndexValue": 190.67087650872867, }, { "Date": "1/9/2008", "IndexValue": 190.67087650872867, }, { "Date": "1/10/2008", "IndexValue": 190.67087650872867, }, { "Date": "1/11/2008", "IndexValue": 190.67087650872867, }, { "Date": "1/12/2008", "IndexValue": 190.67087650872867, } ]; $("#chart").kendoChart({ theme: $(document).data("kendoSkin") || "black", dataSource: { data: seriesData1 }, title: { text: "PMs Due" }, legend: { position: "top" }, seriesDefaults: { type: "line", markers: { visible: false }, line: { width: 5 } }, series: [ { name: "% Due", field: "IndexValue" } ], valueAxis: { labels: { format: "{0}" } }, categoryAxis: { labels: { }, type: "Date", field: "Date", baseUnit: "week" }, tooltip: { visible: true, format: "{0}%" }, legend: { visible: false }, axisDefaults: { visible: true, majorGridLines: { visible: true } }, }); }); </script></body></html>0
Hello Kaleswar,
I am afraid Kendo UI Chart does not support dynamic axes, however you could change the range on the fly through the chart options and then call the redraw() method. For example:
Kind regards,
Iliana Nikolova
the Telerik team
I am afraid Kendo UI Chart does not support dynamic axes, however you could change the range on the fly through the chart options and then call the redraw() method. For example:
var chart = $("#chart").data("kendoChart");chart.options.categoryAxis.baseUnit = "months";chart.redraw();Kind regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kaleswar
Top achievements
Rank 1
Rank 1
answered on 18 Dec 2012, 02:24 PM
I attached my output result
I want to display the YAxis starting from the 100 and the interval like 100, 110, 120 like that in y axis.
How can i do that?
I want to display the YAxis starting from the 100 and the interval like 100, 110, 120 like that in y axis.
How can i do that?
0
Hello Kaleswar,
You can achieve this using the same approach I suggested in my previous post -> i.e. through the chart options configure min and majorUnit of the valueAxis. Like here:
the Telerik team
You can achieve this using the same approach I suggested in my previous post -> i.e. through the chart options configure min and majorUnit of the valueAxis. Like here:
var chart = $("#chart").data("kendoChart");chart.options.valueAxis.min = 100;chart.options.valueAxis.majorUnit = 10;chart.refresh();Regards,
Iliana Nikolovathe Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kaleswar
Top achievements
Rank 1
Rank 1
answered on 19 Dec 2012, 02:58 PM
the attached file is my updated graph
My values are stating the 208 onwards but in the value axis started from the 206.
Here i cannot set the minimum value because the data is changing dynamically.
How can i fix value axis
My values are stating the 208 onwards but in the value axis started from the 206.
Here i cannot set the minimum value because the data is changing dynamically.
How can i fix value axis
valueAxis: {labels: {format: "{0}",//step: 2},majorTicks: {},//majorUnit: 3,narrowRange: true,baseUnit: "fit"}0
Hi Kaleswar,
As I pointed in my first post, Kendo UI Chart does not support dynamic changes of the axes (also of the DataSouce and other configuration options). As a workaround I can suggest to recreate the chart and pass the new data. For your convenience I prepared a jsFiddle example which demonstrates the suggested approach in action.
Regards,
Iliana Nikolova
the Telerik team
As I pointed in my first post, Kendo UI Chart does not support dynamic changes of the axes (also of the DataSouce and other configuration options). As a workaround I can suggest to recreate the chart and pass the new data. For your convenience I prepared a jsFiddle example which demonstrates the suggested approach in action.
Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kaleswar
Top achievements
Rank 1
Rank 1
answered on 20 Dec 2012, 11:10 AM
In feature releases can you add this feature?
0
Hello Kaleswar,
The implementation of this feature is not in our immediate plans, however we will definitely consider it for future versions of the product. Please excuse us for the inconvenience caused.
Kind regards,
Iliana Nikolova
the Telerik team
The implementation of this feature is not in our immediate plans, however we will definitely consider it for future versions of the product. Please excuse us for the inconvenience caused.
Kind regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!