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

Chart from database

2 Answers 92 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Sunil
Top achievements
Rank 1
Sunil asked on 16 Jan 2017, 10:17 PM

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 Answers, 1 is accepted

Sort by
0
Sunil
Top achievements
Rank 1
answered on 16 Jan 2017, 10:57 PM

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,

0
Stefan
Telerik team
answered on 18 Jan 2017, 03:27 PM
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.
Tags
Charts
Asked by
Sunil
Top achievements
Rank 1
Answers by
Sunil
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or