Is it possible to have multiple highcharts with one id?

Question

I have the following scenario in haml:

#ownershipChart{"chart-data" => [["pie1", 100], ["pie2", 150], ["pie3", 200]]}
#ownershipChart{"chart-data" => [["pie4", 45], ["pie5", 50], ["pie6", 20]]}

and in javascript:

$(function(){
  $('#ownershipChart').highcharts({
    chart: {
      type: 'pie'
    },
    title:{
      text: 'Ownership'
    },
    plotOptions:{
      pie:{
        allowPointSelect: true
      }
    },
    series: [{
      type: 'pie',
      name: 'Ownership',
      data: $('#ownershipChart').attr('chart-data')
    }]
  });
});

As you can figure, I'm trying to create one highcharts function that applies across these two charts at the same time. First, I know this is incorrect because $('#ownershipChart').attr('chart-data') isn't returning anything. Second, is this the right way to think about it? I'm currently dynamically generating the haml div id="ownershipChart" so dynamically generating a highcharts js object every time also feels wrong.

What's the best way to generate multiple highcharts when the div ids they are attached to is unknown and varies user by user?

I tried @Rory solution below, but can't get `$(this).attr('chart-data')` to actually return data in set in the object. — locoboy, Dec 01 '14 at 09:42
@locoboy, refer this http://stackoverflow.com/questions/10996778/rendering-highcharts-to-class-instead-of-id — Manish Shrivastava, Dec 01 '14 at 09:46

score 4 · Accepted Answer · answered Dec 01 '14 at 08:21

4

You could instead use a class, and loop through each instance creating the chart as you go. Something like this:

$(function () {
    $('.ownershipChart').each(function()  {
        $(this).highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Ownership'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Ownership',
                data: $(this).attr('chart-data')
            }]
        });
    });
});

Note that the data property is filled by a reference to this, which means the data will be read from the current element in the iteration.

answered Dec 01 '14 at 08:21

Rory McCrossan

331,213
40
305
339

I believe highcharts doesn't let you use a class. – locoboy Dec 01 '14 at 09:32
It does when you use the jQuery connector, as you are. Using the native JS implementation then it only allows the use of `id` attributes as it uses `getElementById` internally. – Rory McCrossan Dec 01 '14 at 09:32
When I tried this the data wasn't loading in the highcharts object. I did confirm through an alert that `$(this).attr('chart-data')` works though. Do you know what could be wrong that `data: $(this).attr('chart-data')` is not compiling? – locoboy Dec 01 '14 at 09:38
I would start a new question for that, as this question is about attaching the chart to individual elements, whereas that is to do with the format of the provided object. – Rory McCrossan Dec 01 '14 at 09:40
How can I confirm that this is right though and that it works with highcharts? – locoboy Dec 01 '14 at 09:41
I figured out the problem - basically `$(this).attr('chart-data')` was returned as a string and highcharts only accepts it as an array. – locoboy Dec 01 '14 at 17:55

Is it possible to have multiple highcharts with one id?

1 Answers1