Set multiple line series in Telerik RadHTMLChart in JavaScript?

Question

I've tried setting up a Telerik RadHTMLChart following this setup (including specifying XAxis/YAxis, Series, etc), and I've used this Telerik documentation (including allowing the chart to define its own params, see markup below) to try to set the data source dynamically, but I can't get the chart to display.

When a button is click, it removes a class that does display: none; on the div wrapping the graph, then calls the generateGraph() function:

this.generateGraph = function () {
    var newData = [];

    for (var i = 0; i < 10; i++) {
        var newPoint = {
            "Value": 2 * i,
            "Color": "Green"
        }
        newData.push(newPoint);
    }

    radGraph.set_dataSource(newData);
    radGraph.repaint();
}

but there are a couple strange things happening:

1. The graph doesn't show unless, using the Chrome console source, I put a breakpoint over radGraph.repaint() and manually run the radGraph.repaint() command.
2. After doing so, no data points show up.
3. The times I have gotten some values to show up (I can't even remember how), the multiple points were connected by a line, as if in the same series.

Can someone help me out? I'm using the Telerik.Web.UI.dll version 2015.2.623.40.

This is the markup:

<telerik:RadHtmlChart ID="radGraphChart" ClientIDMode="Static" runat="server">
    <PlotArea>
        <Series>
            <telerik:LineSeries DataFieldY="Value" ColorField="Color" >
            </telerik:LineSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

EDIT: I've figured out the #1 and #2 issues (#1 is likely a mistake in the kendo code, it's _loadData() function has if(!u._isStockChart()){u._chartObject.refresh();}}else{u._chartObject.refresh();} which should have one of the refresh() calls be redraw(), I'm pretty sure ... #2 is I made a typo somewhere), but I still don't know how to add multiple series' to the chart.

Answer 1

I figured most of it out.

1 + 2:

I don't know exactly where, but in the Kendo functions it is not doing a redraw()/repaint()/refresh() somewhere where it is supposed to, because my first call to repaint() is loading data, setting attributes, blah, blah, but has the _dataSourceChanged = false and not actually redrawing, so the second repaint() call has the _dataSourceChanged = true and then does the redraw.

3:

The markup should have 2 <telerik:LineSeries> tags in the <Series> tag, and just have a different DataFieldY attribute:

<telerik:RadHtmlChart ID="radGraphChart" ClientIDMode="Static" runat="server">
    <PlotArea>
        <Series>
            <telerik:LineSeries DataFieldY="Value1">
            </telerik:LineSeries>
            <telerik:LineSeries DataFieldY="Value2">
            </telerik:LineSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>

Then you can reference add a data point in the JavaScript by doing: this.generateGraph = function () { var newData = [];

for (var i = 0; i < 10; i++) {
    var newPoint = {
        "Value1": 2 * i,
        "Value2": 3 * i
    }
    newData.push(newPoint);
}

radGraph.set_dataSource(newData);
radGraph.repaint();
radGraph.repaint();