Ajax live loading...

[ManniAT]

Hi,

searching your samples I found http://js.syncfusion.com/demos/web/#!/bootstrap/chart/live

In general this is what I'm looking for - but not with script and random data.

In greater details:

I want a line chart with 3 axis - one -10 to 50 the next 0 to 3000 and the last 0 to 100%.

Every line has it's color and axis. In common they share a time property.

Sample data poco for a datapoint: DateTime When, double RedValue, double GreenValue, int BluePercentValue

The controller should bring a view with some basic data (not chart related) and a blank chart.

After loading of the view the chart should (periodically) call a webmethod where it gets a list of datapoints.

I've seen this foums post https://www.syncfusion.com/forums/131006/render-chart-javascript-ajax-return-from-controller which bring down the whole chart.

In the documentation I found https://help.syncfusion.com/aspnet-core/chart/getting-started which transfers the data via ViewBag.

Last not least in the (standard) MVC samples I found http://mvc.syncfusion.com/demos/web/chart/remotedata which seems to load the data from a WCF service (unfortunately the service is not visible in the sample).

Anyhow - this looks closest to what I'm searching for.

But neither the documentation nor the sample show how (if even possible) to load data via ajax.

Also the samples at http://aspnetcore.syncfusion.com/chart/default show only static data - there is no sample about data binding.

Is there a sample which I missed? Or is this simply not supported in core chart?

Manfred

[Saravana Kumar Kanagavel]

 Hi Manfred, 

 

Thanks for contacting Syncfusion support. 

 

We have analyzed your query and created a sample based on your requirement. In the sample, we have shown the live chart using ajax. 

 

Please refer the code example below 

 

[JS] 

function onChartLoad(sender) { 

        generateData(dataLength); 

        setInterval(function () { generateData(); }, 100); 

    } 

 

    function generateData() { 

        dataLength = (dataLength == undefined) ? 10 : (dataLength + 1); 

        $.ajax({ 

            url: '@Url.Action("getData", "Home")', 

            type: "Post", 

            data: { 'length': dataLength }, 

            dataType: "json", 

            success: function (data) { 

                for (var i = 0; i < data.length; i++) 

                    data[i].date = new Date(data[i].date); 

                if (data.length > 50) { 

                    var chartData = data; 

                    data = []; 

                    for (var j = Math.round((chartData.length / 2)) ; j < (Math.round((chartData.length / 2)) + 20); j++) 

                        data.push(chartData[j]); 

                } 

                var chart = $("#container").ejChart("instance"); 

                for (var i = 0; i < chart.model.series.length; i++) { 

                    chart.model.series[i].dataSource = data; 

                    chart.model.series[i].xName = "date"; 

                    chart.model.series[i].yName = "yValue" + (i+1); 

                } 

                chart.redraw(); 

            }, 

        }); 

    } 

 

In the above code, we are triggering the load event. In the event, we are getting the data from server using ajax and binding this data to the chart.  

 

Please find the sample link from the below 

 

Sample Link : http://www.syncfusion.com/downloads/support/forum/133115/ze/Sample-989407564 

  

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K. 

[ManniAT]

Hi Saravana,

GREAT!!!!

Although I had some troubles getting the attached sample running (version mismatches with nuget and so on) I did:

a.) created new aspnetcore 2.0 project
b.) added your nuget package and via bower the scripts
c.) included scripts and so on...

Then I copied the controller and the view - DONE.

Does exactly what I wanted it to do.

Now (sorry but I'm new with your controls) - I have a the same chart - but in this case I want to provide the data directly via the controller.

public IActionResult Index()
{
    return View(BuildData());
}
private DataHolder BuildData() {
	DataHolder dhRet = new DataHolder() { Title = "My Title"};
	dhRet.DataPoints = new List<ChartData>();
	Random r = new Random();
	DateTime date = new DateTime(2015, 01, 01);
	for(int i = 0; i < 30; i++) {
		dhRet.DataPoints.Add(new ChartData(date.AddDays(i + 1), r.Next(10, 50), r.Next(0, 3000), r.Next(0, 100)));
	}
	dhRet.MaxY3 = dhRet.DataPoints.Select(a => a.YValue3).Max();
	dhRet.MinY3 = dhRet.DataPoints.Select(a => a.YValue3).Min();
	return (dhRet);
}
public class DataHolder {
	public string Title { get; set; }
	public double MinY3 { get; set; }
	public double MaxY3 { get; set; }
	public List<ChartData> DataPoints { get; set; }
}
 
public class ChartData {

//the class you provided....

So I get a fixed number of points (not important), the range (min, max) of the yAxis3 is in the model and the datapoints too.

I guess I can do something like:

<e-range max="@Model.MaxY3" min="@Model.MinY3">e-range>

with the axis. And there is (I also guess) a way to

a.) bind the data from the model like somehowsource="@Model.DataPoints"
b.) assign the property to the axis somehow

EDIT - SOLUTION FOUND

I messed around a bit with the control and found the solution...

a.) remove the loaded handler
b.) change (near the bottom) to

<e-common-series-options type="@SeriesType.Line" datasource="@Model.DataPoints">
	e-common-series-options>
	<e-chart-series>
		<e-series name="India" fill="#f44242"  x-name="Date" y-name="YValue1">
		e-series>
		<e-series name="Japan" fill="#079e46" y-axis-name="yAxis2" x-name="Date" y-name="YValue2">
		e-series>
		<e-series name="China" fill="#07229e" y-axis-name="yAxis3" x-name="Date" y-name="YValue3">
		e-series>
	e-chart-series>

The only thing which pestered me was the fact, that the data is not serialized as JSON I hade to change the case from yValu.. to YVal...

By the way - your support is really outstanding! Thank you very much for your help!

Manfred

[Saravana Kumar Kanagavel]

Hi Manfred, 

 

Thanks for your update. 

 

We have analyzed your query and able to reproduce the issue that JSON properties doesn’t serialize properly. And if you want to overcome this issue, then please refer the code example below 

 

[C#] 

  public class ChartData 

        { 

            

           public ChartData(DateTime date,double yValue1, double yValue2, double yValue3) 

            { 

                this.Date = date; 

                this.YValue1 = yValue1; 

                this.YValue2 = yValue2; 

                this.YValue3 = yValue3; 

            } 

            [JsonProperty("Date")] 

            public DateTime Date { get; set; } 

 

            [JsonProperty("YValue1")] 

            public Double YValue1 { get; set; } 

 

            [JsonProperty("YValue2")] 

            public Double YValue2 { get; set; } 

 

            [JsonProperty("YValue3")] 

            public Double YValue3 { get; set; } 

        } 

 

 

And we have modified the sample for your reference and attached in the below location. 

Sample Link : http://www.syncfusion.com/downloads/support/forum/133115/ze/Sample-2064470983 

  

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K.