HighCharts, multiple charts on page call via function

Question

Hopefully someone can help me as I'm stuck at the moment after searching for a solution already for the last 2 days.

I decided to look into HighCharts yesterday for a new project and it does do what I'm after. However I'm trying to make the implementation option into my WordPress plugin as clean as possible and that's where I'm stuck at the moment.

This JSFiddle is working and shows what I like to get as output: http://jsfiddle.net/golabs/tpKU3/

But I would like to be able to create a new chart by just calling a function and supply the target div ID and the 2 dataArray's. My attempt can be found here: http://jsfiddle.net/golabs/rstpA/

or see the jscode here:

/**
 * However this second section of code does NOT work as nothing is displayed in the container21 div...
 * What am I doing wrong here?
 * I like to be able to create a new chart by only supplying the target div ID and the dataArray's, this
 * to have be able to manage the general settings centrally.
 *
 * This JSFIDDLE is related to: http://jsfiddle.net/golabs/tpKU3/
**/
$(function () {
  var __catergories__ = ['AAA','BBB','CCC','DDD','EEE','FFF','GGG'];

  var getChartConfig = function( renderId, dataArray1, dataArray2 ) {
    var config = {};
    config.chart = {
      renderTo: renderId, polar: true, type: 'line', height: 254, width: 360, className: 'SpiderPolarChart', backgroundColor: 'rgba(101,101,101,.1)'
    };
    config.title = {
      text: ''       
    };
    config.legend = {
      layout: 'horizontal', align: 'center', verticalAlign: 'bottom', y: -3,
    };
    config.credits = {
      enabled: true, text: 'highcharts.com', href: 'http://highcharts.com/', position: {
        verticalAlign: 'bottom',
        x: -11,
      }
    };
    config.pane = {
      startAngle: -90, endAngle: 90, center: ['50%', '93%'], size: 300, background: null
        };
    config.xAxis = {
      categories: __catergories__,
      tickmarkPlacement: 'on', tickPixelInterval: 1, lineWidth: 0, labels: {
        rotation: 'auto',
        distance: 12
      }, showLastLabel: true   
    };
    config.yAxis = {
      gridLineInterpolation: 'circle', gridLineDashStyle: 'LongDash', tickInterval: 1, lineWidth: 0, min: 0, max: 5, ceiling: 5, labels: {
        x: 4, y: 15
      }, showLastLabel: true
    };
    config.exporting = { 
      enabled: false
    };
    config.tooltip = {
      shared: true, pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
    };
    config.series = [{
      name: 'Overall Rating', data: dataArray1, color: '#D4A539', type: 'area', pointPlacement: 'on', connectEnds: false, index: 1, legendIndex: 2
      },{
      name: 'Personal Rating', data: dataArray2, color: '#333', type: 'line', pointPlacement: 'on', connectEnds: false, index: 2, legendIndex: 1            
    }];
    return config;
    };

  // ===========================================================================
  charts.push(new Highcharts.Chart(
    getChartConfig( "container21", [1.5,3,2,3,4,1,2], [1,4,1.5,3,2,3,1] )
  ));
});

I've run the code through JSHint.com so all typos should be tackled as it doesn't show any errors at the moment.

I hope someone can guide me into the right direction to get this to work.

Cheers!

** Updated the links to the JSFiddles ** ** ISSUE RESOLVED, see below **

It will require a bit of refactor but take a look - http://stackoverflow.com/questions/8253590/manage-multiple-highchart-charts-in-a-single-webpage — wergeld, May 01 '14 at 13:33
@wergeld, thanks for the suggestion. I've been trying to get that one to work as well for me in the last 2 days, but also with that one I still run into trouble... :( — golabs, May 01 '14 at 14:18
I have worked on your jsFiddle but I am still getting jsHint errors. — wergeld, May 01 '14 at 14:24
I'm just getting the hang of JSFiddle to be honest and I just discover the "set as base" button so both are now correct: — golabs, May 01 '14 at 15:04
http://jsfiddle.net/golabs/tpKU3/ and http://jsfiddle.net/golabs/rstpA/ — golabs, May 01 '14 at 15:05

score 0 · Answer 1 · answered May 01 '14 at 15:15

0

In this jsFiddle (http://jsfiddle.net/golabs/rstpA/) you are not telling it what chart is. You are trying to set the options for a chart that you have not created to update the options you are passing. It is sort of backwards.

Here is a quick "fix":

  var newChart = new Highcharts.Chart(
    getChartConfig( "container21", [1.5,3,2,3,4,1,2], [1,4,1.5,3,2,3,1] )
  );

Now, I would think it would be better to setup a global option set and then merge in your new set (specific to chart you want to build) as in my linked SO answer. This may or may not give you more flexibility.

answered May 01 '14 at 15:15

wergeld

14,332
8
51
81

superb, your fix also works! Many thanks as well! With the fixes you and Matthias provided, I can at least continue with the draft for my new website idea. Btw - my JavaScript / jQuery knowledge is not extremely large, so what would that global option set solution have for advantages? – golabs May 01 '14 at 15:29
The global solution would allow you to set the default options once for things that are not changing between charts. So, write once, use lots instead of write lots, use lots. Also using the jquery extend would let you merge in the global options and the chart specific options. So, maintenance would be easier. – wergeld May 01 '14 at 15:34
Okido, always like to have code easy to maintain so it sounds like I have some reading and playing to do this weekend :) – golabs May 01 '14 at 15:38
Be careful, you may become an addict! – wergeld May 01 '14 at 15:40

score 0 · Answer 2 · answered May 01 '14 at 15:16

0

charts was not defined. Is this the solution you are looking for?

var charts = [];

charts.push(new Highcharts.Chart(

getChartConfig( "container21", [1.5,3,2,3,4,1,2], [1,4,1.5,3,2,3,1] )

));

http://jsfiddle.net/37Gsv/1/

answered May 01 '14 at 15:16

Matthias

1,386
3
24
59

Ath Piseth · Answer 3 · 2015-12-30T07:30:33.480

0

you may try this:

var charts = []; 
  var i=0;
    for (i =1; i< 10; i++){
    var o =i.toString();
    charts.push(new Highcharts.Chart(
    getChartConfig( "container2"+o, [1.5,3,2,3,4,1,2], [1,4,1.5,3,2,3,1] )
  ));
  }

test link: http://jsfiddle.net/newpiseth/8u0tkkkL/5/

edited Dec 30 '15 at 07:30

answered Jan 12 '15 at 11:48

Ath Piseth

75
7

HighCharts, multiple charts on page call via function

3 Answers3