Change data source of Chart on select

Question

I need a little bit of help to change data from a chart, when an option is selected from a drop-down menu. I've searched for similar questions but nothing was really helpful.

So far I have this code and I don't understand what am I missing that it's not working?

the html:

<div id="scroll-container">
        <select id="menu">
            <option value="Oil">Oil</option>
            <option value="Gas">Gas</option>
        </select>

        <div id="container_Oil" data-role="ejmchart" style="height: 320px"></div>
        </div>

and the javascript part:

<script>
            $(function () {
                var value = document.getElementById("menu").value;
                var chart = document.getElementById("container_Oil");


                    $('#menu').change(function(evt){  

                        var dataSelection = eval($("#menu").val());
                        var chart = $('#container_Oil').ejChart ({
                            dataSource: dataSelection

                        })

                })

            })
        </script>

The date I am using for the chart, I have in another file, app.js and it contains the following:

var Oil = ...
var Gas = ...
$("#container_Oil").ejChart(
        {
            primaryXAxis:
                  {
                      //labelFormat: 'dd, MM',
                      //labelFormat: "{value}",
                      range: { min: 1, max: 30, interval: 2 },
                      font: { size: '10px' },
                      labelRotation: 20,
                      visible :false
                  },
            primaryYAxis:
                 {
                     labelFormat: "{value}",
                     //range: { min: 39, max: 40, interval: 0.1 },
                     rangePadding: 'normal',
                     font: { size: '10px' },
                     visible : false
                 },
            commonSeriesOptions: {
                tooltip: { visible: true },
                type: 'line', enableAnimation: false,
                marker:
                      {
                          shape: 'circle',
                          size:
                            {
                                height: 5, width: 5
                            },
                          visible: true
                      },
                border: { width: 2 }
            },

            series: [{
                //Binding series with a JSON data source
                dataSource: Oil,
                //Mapping name of the field containing X value to series
                //xName: 'Day',
                //Mapping name of the field containing Y value to series
                yName: 'Actual',
                name: 'Actual'
            },
            {   dataSource: Oil,
                //xName: 'Day',
                yName: 'Plan',
                name: 'Plan'
            }
            ],  

            canResize: true,
            load: 'onchartload',
            title: { text: 'Product - Oil', font: { size: '12px' } },
            legend: { visible: true, position: "top" }
        });

I want when I select for example Gas in the selector to change the dataSource for the chart from Oil to Gas.

I tried debugging and it said that "Oil" and "Gas" were undefined. Then I tried to put the data for "Oil" and "Gas" in the same file with the script. No more error, but still not working. I think I am missing something important in my code, but I can't seem to understand what. A little help would be more than welcomed!

Answer 1

Perhaps it only creates the charts on page load? Since it's only two charts, you could create them both on page load, and then hide and show the divs depending on the dropdown value for a quick fix.

Answer 2

Did you tried?

 $('#menu').on( "change", function(evt){

Instade of:

$('#menu').change(function(evt){