-1

I have the code up till the current state shown in https://jsfiddle.net/sbLgktm2/6/

I want to only show one graph at a time Eg. After clicking dropdown item1, a barchart appears, if I click dropdown item2, I want to remove the bar chart plotted for item1 and only plot the bar chart for item2. However, console kept returning that "data is not defined" for line 36, javascript, of my jsfiddle code as shown below

var chartData = data[$(currentTarget).data('id')]

Hoping for someone who could share with me where the error is. There should not be any issue with assigning data to graph through my double arrays as the charts could be plotted before I added js lines 20, 31, 41-46.

Other Info: My dropdown list is dynamically generated. Both my x and y axis data does change for each event. Bootstrap 3 and chart.js v2 is used here.

Edwin
  • 63
  • 1
  • 9

1 Answers1

0

Where is doublearrx and doublearry ever defined in your code? You are getting your​ error because you didn't copy the data array from my example.

Keep in my, this example was just a demonstration on how to do the concept you were after (not really to be able to copy and pasted from because you never shared your code that generates your doublearrx and doublearry arrays).

Basically, you just need a way to map each dropdown item to something that you can use to generate your new data arrays (maybe you can use eventnumber for this...or are you already doing it a different way)? Whatever it is, store it in each dropdown items data attribute​.

var li = document.createElement("li");
li.dataset.eventNumber = eventNumber;

Then, pull that data from a selected dropdown item when it is clicked (or however you are already doing it).

var eventNumber = $(e.currentTarget).data('eventNumber');

And use that to get your new labels and data (x and y data) and update your chart. This is the key part because it shows how to change your data in your chart.

myChart.data.datasets[0].data = yaxisarr;
myChart.data.labels = xaxisarr
myChart.update();
jordanwillis
  • 10,449
  • 1
  • 37
  • 42
  • Oh hi Jordan, for my purposes I could not predefine a data set like you did as the number of events is not fixed. Sometimes we could have 3 events, at others 5 events for example. My doublearrx and doublearry has in it the data for all the events and is globally defined in my code. Basically for doublearrx or y, the data is pushed into single arrays for each respective event. So if I want data for y axis for event 2, I have to access yaxisarr = doublearry[2]; and plot my chart using the single array of yaxisarr. – Edwin Mar 19 '17 at 13:06
  • Ok, well do that, get your new data and use the last part if my answer to update your chart. – jordanwillis Mar 19 '17 at 13:09
  • I kind of made some changes and am now able to plot the charts but it is still showing both graphs. https://jsfiddle.net/sbLgktm2/ I think there is something wrong with my js line 34 in jsfiddle. – Edwin Mar 19 '17 at 13:12
  • The jsfiddle doesn't work for me. I click the button and nothing happens. I also see that you are still using an undefined var called `chartData`. Did you link the correct jsfiddle? – jordanwillis Mar 19 '17 at 13:49
  • Jordan, I got it to work already. You were right, once I removed var= chart data and simply update the chart, there is no more overlaps! Thank you so much. – Edwin Mar 19 '17 at 14:01