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

My graph is not displaying

8 Answers 377 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Kaleswar
Top achievements
Rank 1
Kaleswar asked on 17 Dec 2012, 07:21 PM
Here is my code

My graph is not displaying please help
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[chart]" />
</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

Sort by
0
Kaleswar
Top achievements
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
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[chart]" />
</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
Iliana Dyankova
Telerik team
answered on 18 Dec 2012, 02:13 PM
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: 
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
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?
0
Iliana Dyankova
Telerik team
answered on 19 Dec 2012, 01:51 PM
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: 
var chart = $("#chart").data("kendoChart");
chart.options.valueAxis.min = 100;
chart.options.valueAxis.majorUnit = 10;
chart.refresh();

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
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

valueAxis: {
labels: {
format: "{0}",
//step: 2
 
},
majorTicks: {
 
},
//majorUnit: 3,
narrowRange: true,
baseUnit: "fit"
 
}
0
Iliana Dyankova
Telerik team
answered on 20 Dec 2012, 10:42 AM
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
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
answered on 20 Dec 2012, 11:10 AM
In feature releases can you add this feature?
0
Iliana Dyankova
Telerik team
answered on 20 Dec 2012, 04:14 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Charts
Asked by
Kaleswar
Top achievements
Rank 1
Answers by
Kaleswar
Top achievements
Rank 1
Iliana Dyankova
Telerik team
Share this question
or