Need Assistance to Identify the Contextual Charting

[lavanyadeepak]

Team,

I have a following data and would like to know which chart would be the best and if some one can help me with configuring the same it would be great.

{"HeartBeatRate":952.0,

 "Compensation":1.0,

 "CalibratedBreakEven":50.0,

 "Configuration":{"ParameterX":{"Bass":0.0,"Double":1.0},

  "ParameterY":{"Bass":0.0,"Double":1.0},

  "ParameterZ":{"Bass":0.0,"Double":1.0},

  

  "InputX":{"Bass":0.0,"Double":1.0},

  "InputY":{"Bass":0.0,"Double":1.0},

  "InputZ":{"Bass":0.0,"Double":1.0}

  }

}

          P X          P Y          P Z         I X         I Y         I Z                               Time          Index

        -0.0699         0.0417         0.5712       280.5176      -205.1392        85.0677        2016-09-08T11:54:18.7316444              0

        -0.0605         0.0381         0.6282       496.2769      -474.6552       236.9080        2016-09-08T11:54:18.7316444              1

         0.0402        -0.0038         1.0721        99.3500      -112.9608        62.4542        2016-09-08T11:54:18.7496444              2

         0.1198        -0.0300         1.3649      -472.7936       432.9681      -229.7211        2016-09-08T11:54:18.7496444              3

[Saravana Kumar Kanagavel]

Hi Deepak, 

 

Thanks for contacting Syncfusion Support. 

We have analyzed your query and data provided by you. But we need your use case scenario to suggest the series type. 

If you wish to showcase a trend of data, then you can use line type charts (line, spline, area) 

Link: https://mvc.syncfusion.com/demos/web/chart/default 

 

And if you wish to show high and low comparison between data, then you can use column type series. 

Link: https://mvc.syncfusion.com/demos/web/chart/column 

 

If you need to show financial data, you can use financial type of series (Hilo, hiloOpenClose) 

Link: https://mvc.syncfusion.com/demos/web/chart/hiloopenclose 

 

And if you wish to show accumulated data you need to use accumulation series (pie, doughnut, pyramid and polar) 

Link: https://mvc.syncfusion.com/demos/web/chart/pie 

 

So kindly share your use case scenario and data that you are binding to chart. As of now we have prepared a line chart sample for your reference and attached in the below location. 

 

Sample link : https://www.syncfusion.com/downloads/support/forum/126169/ze/Sample244809178 

  

Please find the output of the plotted chart using your provided data from the below  

 

 

In the above output, first three series values are very less when compared with the other three series values. So, those series point values are invisible. But this can be viewed by zooming the chart. 

And if you want to display all the series point values clearly, then you can use multiple axes in chart. Find the output of the sample below 

 

In this we have grouped the series based on its points Y value and bind it to two different axes for clear view. 

 

Please revert us the below details, if your query is misunderstood at our end or if you face any concern on this. 

v  Detailed explanation about your requirement and your sample 

v  And also revert us with data source(X and Y values) to bind for each series.  

 

Regards, 

Saravana Kumar K 

 

[lavanyadeepak]

Hello Team,

I would go with the Line Chart. The X-Axis is going to the Time and ParameterX,ParameterY, ParameterZ, InputX, InputY and InputZ would go as lines in the Y Axis.  I modified the code you have sent below

<div>

  

   @(Html.EJ().Chart("last30")

         .PrimaryXAxis(p=>p.ValueType(AxisValueType.Datetime))

                .RowDefinitions(Rowdef =>

                                      {

                                          Rowdef.RowHeight(50).LineColor("gray").LineWidth(0).Unit("percentage").Add();

                                          Rowdef.RowHeight(50).LineColor("#A8A8A8").LineWidth(1).Unit("percentage").Add();

               })

         .Axes(a=>

             a.Name("yAxis1").OpposedPosition(true).Orientation("vertical").RowIndex(1).Add())

        .CommonSeriesOptions(c=>c.EnableAnimation(true))

               .Series(ser =>

               {

                   ser.Name("ParamnerterX").Fill("red").Type(SeriesType.Line).YAxisName("yAxis1").Add();

                   ser.Name("ParamnerterY").Fill("green").Type(SeriesType.Line).YAxisName("yAxis1").Add();

                   ser.Name("ParamnerterZ").Fill("blue").Type(SeriesType.Line).YAxisName("yAxis1").Add();

                   ser.Name("InputX").Fill("orange").Type(SeriesType.Line).YAxisName("yAxis1").Add();

                   ser.Name("InputY").Fill("green").Type(SeriesType.Line).YAxisName("yAxis1").Add();

                   ser.Name("InputZ").Fill("violet").Type(SeriesType.Line).YAxisName("yAxis1").Add();

               })

               .Load("onChartLoad")

               .Legend(lg => lg.Visible(true))

               .IsResponsive(true)

               .Size(s=>s.Height("450").Width("600"))

)

</div>

And it showed up as:

I would need the series to be populated at runtime. Would the component support it?

Attachment: download_343caf61.rar

[Saravana Kumar Kanagavel]

Hi Deepak,   

   

Thanks for your update.   

  

We have analyzed your query and created a sample based on your requirement. In a sample, we can get the user input value with the no. of the series to be rendered and populated the series dynamically in chart based on the user value.  

  

Please refer the code example below   

[JS] 

function change(sender) //onChange Event triggered 

    { 

        window.val = parseInt(sender.value); 

        if(val > 10) 

            window.val = 10; 

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

        chart.model.series = []; 

        for (var i = 0; i < window.val; i++) { 

            var points = []; 

            for (var j = 0; j < 10; j++) { 

                var random = parseInt(getRandomInt(20, 50)); 

                points.push({ x: j, y: random }); 

 

            } 

            chart.model.series.push({ dataSource: points, xName: "x", yName: "y", type: "line" }); 

        } 

        chart.redraw(); 

 

    } 

 

    function getRandomInt(min, max) { 

        return Math.floor(Math.random() * (max - min + 1)) + min; 

    } 

In the above code while changing the value in the text box, we have dynamically created series based on the user value and generated a points using random values and redrawing the chart.    

Refer a sample from the below location.   

   

Sample Link: https://www.syncfusion.com/downloads/support/forum/126169/ze/Sample1298529414   

  

Please find the output of the sample below   

 

 

 

 

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K 

[lavanyadeepak]

Hi Team,

I have modified the application but having issues with the Chart Control. I have created a Incident for the same here:

https://www.syncfusion.com/support/directtrac/incidents/164913

[Anandaraj T]

Hi Deepak, 

Thanks for the update. 

We have modified the sample as per your requirement and attached it in the support incident mentioned by you under your direct trac account. 

https://www.syncfusion.com/account/login 

Regards, 

Anand