As basic as this question may seem, I've been wrestling with it for several days with no solution. I have a chart where I was once using a datasource. I am no longer using a datasource and would like to manually add the series with its data to the chart via chart.options.series.push and chart.options.navigator.series.push. Currently, when I add a series to the chart through chart.options I can see the line series. I am trying to add that same series to the navigator using chart.options, but the navigator doesn't show the series. In fact, the navigator is not even visible. Here is my chart creation and addseries function code. Please help!
Thanks much,
Tonih
function createChart() { $("#chart").kendoStockChart({ tooltip: { visible: true, shared: true, background: "white", }, seriesDefaults: { type: "line", }, valueAxis: { name: "straight", visible: true, labels: { format: "{0}%" } }, navigator: { series: [{ type: "line", width: 1, missingValues: "interpolate", }], categoryAxis: { baseUnit: "yearly", majorTicks: { visible: "false", color: "white", }, minorTicks: { size: 3, }, } } }); }function addSeries(){ var chart = $("#chart").data("kendoStockChart"); var chartOptions = chart.options; chartOptions.series.length = 0; for( series in plotSeriesCollection){ var name = plotSeriesCollection[series].id; var data = []; for(obs in plotSeriesCollection[series].observations){ data.push(plotSeriesCollection[series].observations[obs].obsValue); } var timePeriod = []; for(time in plotSeriesCollection[series].observations){ timePeriod.push(plotSeriesCollection[series].observations[time].obsTime); } chartOptions.categoryAxis = {"categories": timePeriod, "labels": {"step": 60}, "baseUnit": "days", "crosshair": {"visible": true, "color": "silver"}, "type": "date", "majorTicks": {"visible": "false"}, "minorTicks": {"visible": "false"}}; chartOptions.series.push({"name": name, "color": "red", "axis": "straight", "data": data, "width": 1, "missingValues": "interpolate", "markers": {"visible": false}}); chartOptions.navigator.categoryAxis = {"categories": timePeriod, "labels": {"step": 60}, "baseUnit": "days", "crosshair": {"visible": true, "color": "silver"}, "type": "date", "majorTicks": {"visible": "false"}, "minorTicks": {"visible": "false"}}; chartOptions.navigator.series.push({ "name": name, axis: "_navigator", type: "area", "color": "red", "data": data }); } chart.redraw(); }20 Answers, 1 is accepted
Rank 1
I believe I figured this out. I couldn't find any documentation on chart.options. Is there any available?
Thanks,
Tonih
In this case I will suggest you to use $("#yourChartSelector").kendoStockChart($.extend(true, oldOptions, newOptions)). This piece of code will recreate the chart with new options that you will pass to the chart. Could you try this and tell me if you have any problems.
Regards,Hristo Germanov
Telerik
Rank 1
Thanks for your response. Yea, I ended up doing just that. Thanks!
Tonih
$("#add").click(function() {
config.series.push({
"data": [20, 40, 45, 30, 50],
"missingValues": "interpolate",
"color": "blue"
});
config.navigator.series.push({
"data": [20, 40, 45, 30, 50],
"missingValues": "interpolate",
"color": "blue"
});
createChart();
});
function createChart() {
$("#chart").kendoStockChart(
// Create a deep copy of the configuration
// for each Chart instance.
$.extend(true, {}, config)
);
}
Rank 1
This method of doing this is not ideal for my situation. Reason being is that I would like to access the chart outside of the jquery using
var chart = $("#chart").data("kendoStockChart");
var chartOptions = chart.options;
This is becoming overly complicated for just wanting to add a series to the chart and navigator without using a datasource (binding). I do not want to use the variable config because I cannot access it outside of the jquery anonymous (function()...
Is it possible that you can please put together a really basic example of how to add series to the chart and navigator without using a datasource (binding)? I would like to push the name and the series data manually to the chart and navigator series array. Something like this - http://docs.kendoui.com/getting-started/dataviz/chart/chart-types/line-charts - but with the stockchart and navigator instead. I cannot find any documentation on this anywhere. Please help!
Thanks,
Tonih
Could you give me a simple test project that I can examine and advice you further? You can build it with jsbin/jsfiddle.
Regards,Hristo Germanov
Telerik
Rank 1
I've decided to go back and do this again from scratch. So far all good, however, I am running into an issue where if I add data to the config.datasource.data array, it is showing my series name twice in the shared tootltip. I put together a generic example - here. Add a name to the input text from one in the datasource and hit the add series button, then add another name and hit the add series button again. For some odd reason that I can't detect it is adding it twice in the shared tooltip. Please help
Thanks,
Tonih
Please allow me to suggest an alternative approach that relies on filtering instead of series configuration.
var filters = [];
$("#add").click(function() {
var chart = $("#chart").data("kendoStockChart");
filters.push({
field: "Name",
value: $("#nameField").val(),
operation: "eq"
});
chart.dataSource.filter({
logic: "or",
filters: filters
});
});
-- Live demo --
The chart will be notified of the change and will rebind the grouped series correctly.
Is this approach applicable to your real scenario?
T. Tsonev
Telerik
Rank 1
Thanks for your response. Ultimately, I just need a chart that I can add and remove series and valueAxes dynamically. The reason I may need to add and remove value axes dynamically is because some of my data sets have different plotting units (ex. percent, currency). Also, some of the series in the chart have different category axis values lengths, although when I add a new series to the chart, it only accounts for the category axis of the previous series, although the new series may have a lot more datapoints and category axis values. For example, lets say my first series have 5 datapoints with 5 categoryaxis values, respectively. If I add a second series to the chart, which may have 10 datapoints with 10 categoryaxis values, the chart will only display 5 datapoints regardless. How can I fix this?
These questions are really the essence of what I am trying to accomplish with your charts, I imagined this to be more straightforward but I'm realizing that it is not. Your help has been invaluable.
Tonih
I see what you mean. Using category binding (or implicitly, through dataField) should deal with mismatched series dates.
This requires upgrading to the latest 2013.2 version. See the update version of your demo here - http://jsbin.com/uGoYaZI/2/edit
The second problem is caused by duplicate series. You add two series for each name, but you also have grouping enabled. This also generates two new series for each name in what is basically a geometric progression.
The solution is simple, keep only two series in the configuration and let the grouping generate the rest.
config.series = [{
...
}];
config.navigator.series = [{
...
}];
I've implemented this in the demo.
T. Tsonev
Telerik
Rank 1
This is awesome. Thanks!
Tonih
Rank 1
This is my last question on this topic. In regards to your last demo, how would I manipulate which axis a series corresponds with based on certain series parameters? I would like that if a series has a unit parameter that says currency to plot on one axis, and if another has a unit param that says currency, i would like to use multi axes.
Thanks,
Tonih
The value axis can't be set dynamically and you'll need to have one series per currency.
As we're basically dealing with two-level grouping (user, currency), we need to build the series data manually. The built-in series grouping works only for one level grouping.
My suggestion is to do the grouping and filtering in a data source instance that is not linked to the chart.
The series will be built directly with the relevant data embedded in the definition.
var ds = new kendo.data.DataSource({
data: [ ... ],
group: [{
field: "Name",
dir: "asc"
}, {
field: "Currency",
dir: "asc"
}],
change: bindSeries
});
// Create one series for each group (user/currency combination)
var series = [];
var users = view.items;
for (var u = 0; u < users.length; u++) {
var currencies = user.items;
for (var c = 0; c < currencies.length; c++) {
var currency = currencies[c];
series.push({
data: currency.items,
valueAxis: currency.value,
// ...
});
}
}
createChart();
}
I've updated the demo here: http://jsbin.com/uGoYaZI/7/edit
T. Tsonev
Telerik
Rank 1
This is just wonderful. Let me go ahead and integrate this into my project. Thanks much!
Tonih
Rank 1
How do I make this chart demo you have provided plot all the series in the datasource without filtering? For example, you filter what series to show by using this function:
$("#add").click(function() {
var chart = $("#chart").data("kendoStockChart");
activeFilters.push({
operation: "eq",
field: "Name",
value: $("#nameField").val()
});
ds.filter({
logic: "or",
filters: activeFilters
});
});
I would like for the chart to automatically plot all the series in the datasource even when the datasource is updated with new data. I do not want to filter for the name anymore, the chart should just plot all the series that's in the datasource.
Thanks,
Tonih
That's easy, just don't add any filters and call read:
ds.read();
-- Live demo --
It is called implicitly by filter, that's why it was not needed in the original demo.
T. Tsonev
Telerik
Rank 1
Rank 1
Everything is working fine now, thanks much for your help. I have one question in regards to the valueaxes however. Do the axes need to work in tandem? I noticed that the ranges are the same on both, but what if I have a situation where one axis represents percentages and the other represents currency? Could the axes work independently? For example, lets say i have a series on valueaxis USD with a range between $1 and $20 and one on valueaxis EU with a range of $2,000,000 - $30,000,000. With the current setup both axes would show a range from $1 - $30,000,000. How can I get the valueaxes to only represent their series range? Hope I was clear.
Thanks,
Tonih
The axis range is determined only by the series that are associated with the axis (through valueAxis).
Our last demo used the currency code as value axis name, but you can add more axes for different value ranges.
T. Tsonev
Telerik
A quick correction. The property I had in mind is named series.axis, not series.valueAxis.
I've updated the demo as well.
Apologies for the caused inconvenience.
T. Tsonev
Telerik
Rank 1
Tonih