1

I have a C3 xy chart, that I'm trying to add an onclick to. The onclick is commented out (lines 58-70) in the attached fiddle. Scatter Fiddle The chart does not show when I have the onclick code included, somewhere I've messed up the syntax.

  var clickEvent = function(d) {
  var clickData = d.id;
  var clickValue = d.value; //y value ROS
  var clickCat = [d.x]; //x value AU
  var clickLegend = [d.name];

  var clickYear = d.id == 'data1' ? tooltips.data1[d.index] : d.id == 'data2' ? tooltips.data2[d.index] : d.id == 'data3' ? tooltips.data3[d.index] : d.id == 'data4' ? tooltips.data4[d.index] : null;

  var allTogether = clickData + "|" + clickValue + "|" + clickCat + "|" + clickLegend + "|" + clickYear; 

  var theURL = alert(allTogether);
}
onclick: clickEvent
user8038235
  • 69
  • 8
  • An event handler takes an [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event) object as argument. What do you expect `d` to be? If you want the dom element you can use `d.target` or `d.currentTarget`. – Håken Lid Jun 29 '17 at 18:19
  • Could you give me a little more specific directions on what changes to make, I don't know javascript that well, thank you. – user8038235 Jun 30 '17 at 03:54

1 Answers1

1

After extracting your method declaration outside of your config I could see that you messed up your configuration. After your comment

//type: 'scatter' // uncoment to remove lines

were some closing brackets which closed your data property. So you actually placed your onclick function outside this property which is equivalent of no method being declared.

Here is your fixed fiddle.

Akoya
  • 1,060
  • 12
  • 17
  • Thank you, the change initially worked. But when I commented out the hard coded data and programmatically updated **Data1** with a Filemaker script, (the code is being run with a Filemaker web viewer) the tooltips and onclick quite working, the new data did plot. Any ideas on what might be wrong? – user8038235 Jul 01 '17 at 02:19
  • did you update both of your `data1`? you know that you got two diffrent arrays which depend on each other. The `data1` from your tooltip and the `data1` from your c3 config. – Akoya Jul 01 '17 at 12:11
  • Not sure what you mean by "update both of your data1" – user8038235 Jul 01 '17 at 17:42
  • `var tooltip = { ... data1: ... }` and `var chart c3.generate({...columns:[ ...'data1' ...]` on your `onclick` you make the tooltip data depend on your columndata, do you keep both in sync (especially the array length)? – Akoya Jul 01 '17 at 17:50
  • Are you referring to the length of these arrays, **Data1** ['x1', 1.3, 1.9, 1.5], ['x2', 2.6, 2.1, 1], ['x3', 4.3, 2.3, 4.3], ['x4', 3.3, 2.1, 2.5], ['data1', 1.1, 2.1, 3.1], ['data2', 2.2, 3.2, 2.5], ['data3', 1.3, 1.3, .5], ['data4', 8.4, 7.9, 5.5] and this array **Data3** year1: [2012, 2013, 2014], year2: [2011, 2012, 2013], year3: [2011, 2012, 2013], year4: [2012, 2013, 2014] – user8038235 Jul 01 '17 at 19:20
  • Okay I think I found the issue, as you said the the onclick and tooltip are dependent as data1, the script I used to import the data used year1 instead of data1. – user8038235 Jul 01 '17 at 19:46
  • I also needed to put single quotes around the tooltip data '2011', what would be the syntax and location of code for the tooltip to change the font type and size? Thanks again – user8038235 Jul 01 '17 at 20:39