My graph is not displaying

9 posts, 0 answers
  1. Kaleswar
    Kaleswar avatar
    10 posts
    Member since:
    Jul 2012

    Posted 17 Dec 2012 Link to this post

    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>
  2. Kaleswar
    Kaleswar avatar
    10 posts
    Member since:
    Jul 2012

    Posted 17 Dec 2012 Link to this post

    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>


  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 18 Dec 2012 Link to this post

    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!
  4. Kaleswar
    Kaleswar avatar
    10 posts
    Member since:
    Jul 2012

    Posted 18 Dec 2012 Link to this post

    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?
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 19 Dec 2012 Link to this post

    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!
  6. Kaleswar
    Kaleswar avatar
    10 posts
    Member since:
    Jul 2012

    Posted 19 Dec 2012 Link to this post

    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"
     
    }
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 20 Dec 2012 Link to this post

    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!
  8. Kaleswar
    Kaleswar avatar
    10 posts
    Member since:
    Jul 2012

    Posted 20 Dec 2012 Link to this post

    In feature releases can you add this feature?
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 20 Dec 2012 Link to this post

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