How to load information that is not hard coded in Sparkline Grid Template

[Unknown]

I'm basically following this example:

https://ej2.syncfusion.com/aspnetcore/SparkLine/SparkGrid#/material

The basics are working, I can get a chart to show up in each one of my rows.

My question is how to attach this to data that's not hardcoded.. like the LineData?

Here's essentially my grid:

<div class="control-section">

                    <div id="sparkline" class="row">

                        <div class="cols-sample-area">

                            <script type="text/x-template" id="columnTemplate1">

                                <div id="spkline${Id}" />

                            </script>

                            <div id="grid">

                                <ejs-grid id="grid" created="loadComplete" dataSource="@Model.Measures" allowSelection="false" enableColumnVirtualization="false" enableHover="true" height="400">

                                    <e-grid-columns>

                                        <e-grid-column field="Id" headerText="ID" textAlign="Right" width="60"></e-grid-column>

                                        <e-grid-column field="MeasureName" headerText="MeasureName" width="60"></e-grid-column>

                                        <e-grid-column field="MeasureDescription" headerText="MeasureDescription" width="100"></e-grid-column>

                                        <e-grid-column headerText="Graph" template="#columnTemplate1" textAlign="@Syncfusion.EJ2.Grids.TextAlign.Center" width="100"></e-grid-column>

                                    </e-grid-columns>

                                </ejs-grid>

                            </div>

                        </div>

                    </div>

                </div>

// and more here... //

 function loadComplete(args) {

            setTimeout(function() {

                    for (var i = 1; i < @Model.Measures.Max(x => x.Id) + 1; i++) {

                        line = new ej.charts.Sparkline({

                            height: '50px',

                            width: '150px',

                            lineWidth: 2.5,

                            valueType: 'Numeric',

                            fill: getSparkColor(i),

                            dataSource: getSparkData('line', i)

                        });

                        line.appendTo('#spkline' + i);

                    }

                },

                1000)

        }

        var lineData = [

            [0, 6, 4, 1, 3, 2, 5],

           ..

           .. 

           ..

            [1, 3, 4, 2, 5, 0, 6]

        ];

        function getSparkColor(count) {

            //var returnValue = String(@ViewBag.Colors[count]);

            //return returnValue;

            return '#3D78EF';

        }

        function getSparkData(type, count) {

            if (type === 'line') {

                return lineData[count];

            }

        }

So....

Is it possible to have getSparkColor and getSparkData to access the ViewBag? It tells me the variable doesn't exist in the context when I attempt to access the [count] in the ViewBag for getSparkColor, had similar issues referencing the 'count' item in getSparkData. 

I essentially want the Color of each sparkline to be different and I obviously need to set each data specifically.

Thanks.

[Baby Palanidurai]

Hi Mark, 

Greetings from Syncfusion. 

We have analyzed your query and we have prepared a simple sample based on your requirement. In that sample, we are getting the data source for sparkline from the ViewBag and also get the fill color for sparkline charts.  

Please find the below code snippet to achieve this requirement, 

List<DataSource> data1 = new List<DataSource>(); 

data1.Add(new DataSource() { x = 0, y1 = 0, y2 = 1 }); 

// Add more data 

ViewBag.data = data1; 

ViewBag.Colors = new string[] { "#3D78EF", "green" }; 

 

 

 

function loadComplete(args) { 

            setTimeout(function() { 

                    for (var i = 1; i < 3; i++) { 

                        line = new ej.charts.Sparkline({ 

                            height: '50px', 

                            width: '150px', 

                            valueType: 'Numeric', 

                            xName: 'x', 

                            yName: 'y' + i, 

                            fill: getSparkColor(i), 

                            dataSource: @Html.Raw(Json.Serialize(@ViewBag.data)) 

                        }); 

                        line.appendTo('#spkline' + i); 

                    } 

                }, 

                1000) 

        } 

 

function getSparkColor(count) { 

   var colors =   @Html.Raw(Json.Serialize(@ViewBag.Colors)); 

   return colors[count - 1]; 

} 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2CoreSample-287347400 

Kindly revert us, if you have any concerns. 

Regards, 

Baby.