Chart from database

3 posts, 0 answers
  1. Sunil
    Sunil  avatar
    16 posts
    Member since:
    Jul 2015

    Posted 16 Jan Link to this post

    Dear, 

    I am building dynamic scatter line & dot chart from database with dynamic numbers of chart series. When i tried pre-configure chart series it working fine.

    Class representation.

    public class GraphSeriesPoint {
         public GraphSeriesPoint(double X, double Y, string Tooltip)
    { this.PointValueX = X;  this.PointValueY = Y; this.PointTooltip = Tooltip; }        public double PointValueX { get; set; }<br>        public double PointValueY { get; set; }<br>        public string PointTooltip { get; set; }<br>    }<br>    public class GraphSeries<br>    {<br>        public int SeriesID { get; set; }<br>        public string SeriesName { get; set; }<br>        public string SeriesColor { get; set; }<br>        public string SeriesDashType { get; set; }<br><br>        public List<GraphSeriesPoint> Points {get;set;}<br>    }<br>    public class GraphData<br>    {<br>        public int GraphID { get; set; }<br>        public string GraphTitle { get; set; }<br>        public string OperatingWindow { get; set; }<br>        public string OperatingEnvelop { get; set; }<br>        public string DesignEnvelop { get; set; }<br><br><br>        public string XTitle { get; set; }<br>        public double XMin { get; set; }<br>        public double XMax { get; set; }<br><br><br>        public string YTitle { get; set; }<br>        public double YMin { get; set; }<br>        public double YMax { get; set; }<br><br>        public List<GraphSeries> Lines { get; set; }<br>    }
  2. Sunil
    Sunil  avatar
    16 posts
    Member since:
    Jul 2015

    Posted 16 Jan in reply to Sunil Link to this post

    Dear, 

    I am building dynamic scatter line chart from database with dynamic chart series. When i tried pre-configure (fix number of series) chart series it working fine. Can you help to get solution for this. 

    Class representation.

    //scatter chart configuration
    public class GraphData
    {
        public int GraphID { get; set; } //id
        public string GraphTitle { get; set; } //chart title
     
        public string XTitle { get; set; } //x-axis title text & min and max value<
        public double XMin { get; set; } 
        public double XMax { get; set; }
     
        public string YTitle { get; set; } //y-axis title text & min and max value
        public double YMin { get; set; }
        public double YMax { get; set; }
     
        public List<GraphSeries> Lines { get; set; } //list of chart series
    }
     
    //Chart series
    public class GraphSeries
    {
         public int SeriesID { get; set; } //id
         public string SeriesName { get; set; } //series name
         public string SeriesColor { get; set; }
         public string SeriesDashType { get; set; }
     
         public List<GraphSeriesPoint> Points {get;set;} //list of series point
    }
     
    //Point of series
    public class GraphSeriesPoint
    {
        public double PointValueX { get; set; } //x-axis values
        public double PointValueY { get; set; } //y-axis values
        public string PointTooltip { get; set; } //point tooltip
    }

     

    I prepare object "GraphData" which has list of "GraphSeries" which has list of "GraphSeriesPoint" from database inside controller and controller returns JSON.

     

    var builtUrl = "GetEquipmentGraphData?equipmentID=12";
     var dataSource = new kendo.data.DataSource({
       transport: {
                read: {
                     url: builtUrl,
                     dataType: "json"
                       }            
                                 },
       group: {
              field: "GraphSeries",
              dir: "asc"
       }
    });
    dataSource.read();
     var view = dataSource.view();
    alert(view.length); //Always returns 0.

     

    var view returns 0, where i check controller add few series with point details, I think i made some mistake in defining schema.

    Also please help to to create dynamic graph based on datasource properties like (axis and series configuration).

     

    Thank you,

  3. Stefan
    Admin
    Stefan avatar
    912 posts

    Posted 18 Jan Link to this post

    Hello Sunil,

    I can suggest checking our example for Scatter Chart bound to remote grouped data. Also, I can suggest checking the response from the server to observe the expected data format:

    http://demos.telerik.com/kendo-ui/line-charts/grouped-data

    As for the dynamic Chart, I can suggest checking the following resources:

    http://www.telerik.com/forums/binding-chart-s-series-to-dynamic-data

    http://jsfiddle.net/HRpL8/2/

    http://jayeshgoyani.blogspot.bg/2013/05/how-to-add-multiple-lines-series.html

    If additional assistance is needed, please provide a runnable example so I can inspect it locally.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top