This is a migrated thread and some comments may be shown as answers.

Navigator not showing series

20 Answers 86 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Tonih
Top achievements
Rank 1
Tonih asked on 16 Aug 2013, 04:48 PM
Hi,

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

Sort by
0
Tonih
Top achievements
Rank 1
answered on 19 Aug 2013, 07:43 PM
Hi,

I believe I figured this out. I couldn't find any documentation on chart.options. Is there any available?

Thanks,
Tonih
0
Hristo Germanov
Telerik team
answered on 20 Aug 2013, 12:05 PM
Hello 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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tonih
Top achievements
Rank 1
answered on 20 Aug 2013, 04:02 PM
Hi Hristo,

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)
                    );
  }
0
Tonih
Top achievements
Rank 1
answered on 21 Aug 2013, 04:34 PM
Hi Hristo,

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
0
Hristo Germanov
Telerik team
answered on 23 Aug 2013, 11:33 AM
Hello 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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tonih
Top achievements
Rank 1
answered on 09 Sep 2013, 04:22 PM
Hi Hristo,

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
0
T. Tsonev
Telerik team
answered on 11 Sep 2013, 02:56 PM
Hi,

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?

Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tonih
Top achievements
Rank 1
answered on 11 Sep 2013, 03:17 PM
Hi T. Tsonev ,

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
0
T. Tsonev
Telerik team
answered on 12 Sep 2013, 03:41 PM
Hello,

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.

Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tonih
Top achievements
Rank 1
answered on 13 Sep 2013, 04:07 PM
Hi  T. Tsonev,

This is awesome. Thanks!

Tonih
0
Tonih
Top achievements
Rank 1
answered on 13 Sep 2013, 06:25 PM
Hi  T. Tsonev,

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
0
T. Tsonev
Telerik team
answered on 16 Sep 2013, 07:48 AM
Hello,

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
});


function bindSeries(view) {
    // 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
Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tonih
Top achievements
Rank 1
answered on 16 Sep 2013, 01:59 PM
Hi T. Tsonev,

This is just wonderful. Let me go ahead and integrate this into my project. Thanks much!

Tonih
0
Tonih
Top achievements
Rank 1
answered on 01 Oct 2013, 03:44 PM
Hi T. Tsonev,

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
0
T. Tsonev
Telerik team
answered on 02 Oct 2013, 10:12 AM
Hello,

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.

Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tonih
Top achievements
Rank 1
answered on 02 Oct 2013, 02:38 PM
Thanks again kind sir!
0
Tonih
Top achievements
Rank 1
answered on 08 Oct 2013, 09:31 PM
Hi T. Tsonev ,

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
0
T. Tsonev
Telerik team
answered on 09 Oct 2013, 09:21 AM
Hi,

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.

Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
T. Tsonev
Telerik team
answered on 09 Oct 2013, 02:26 PM
Hello,

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.

Regards,
T. Tsonev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tonih
Top achievements
Rank 1
answered on 09 Oct 2013, 07:33 PM
Just what I needed, thanks again!

Tonih
Tags
Charts
Asked by
Tonih
Top achievements
Rank 1
Answers by
Tonih
Top achievements
Rank 1
Hristo Germanov
Telerik team
T. Tsonev
Telerik team
Share this question
or