Add different symbols to highcharts chart with dynamic data

Question

So I have a highchats chart that is getting it's data dynamically from a MySQL database.

I would like each series to have a different symbol but no matter what I try it is not working, my main issue is that I am unsure where in my example I need to define the different kinds of symbols.

My HTML:

<div id="container"></div>
<br />
<table border="0" cellpadding="0" cellspacing="0" id="sheet6" class="sheet6 gridlines">
        <col class="col0">
        <col class="col1">
        <col class="col2">
        <col class="col3">
        <tbody>
          <tr class="row0">
            <td class="column0 style119 s">Month</td>
            <td class="column1 style117 f">Manual</td>
            <td class="column2 style117 f">Automated</td>
            <td class="column3 style117 f">Profit/Loss</td>
          </tr>
          <tr class="row1">
            <td class="column0 style0 n">0</td>
            <td class="column1 style118 f">0</td>
            <td class="column2 style118 f">0</td>
            <td class="column3 style118 f">0</td>
          </tr>
          <tr class="row2">
            <td class="column0 style0 n">1</td>
            <td class="column1 style118 f">119</td>
            <td class="column2 style118 f">551</td>
            <td class="column3 style118 f">-432</td>
          </tr>
          <tr class="row3">
            <td class="column0 style0 n">2</td>
            <td class="column1 style118 f">238</td>
            <td class="column2 style118 f">717</td>
            <td class="column3 style118 f">-479</td>
          </tr>
          <tr class="row4">
            <td class="column0 style0 n">3</td>
            <td class="column1 style118 f">357</td>
            <td class="column2 style118 f">860</td>
            <td class="column3 style118 f">-504</td>
          </tr>
          <tr class="row5">
            <td class="column0 style0 n">4</td>
            <td class="column1 style118 f">476</td>
            <td class="column2 style118 f">980</td>
            <td class="column3 style118 f">-504</td>
          </tr>
          <tr class="row6">
            <td class="column0 style0 n">5</td>
            <td class="column1 style118 f">595</td>
            <td class="column2 style118 f">991</td>
            <td class="column3 style118 f">-396</td>
          </tr>
          <tr class="row7">
            <td class="column0 style0 n">6</td>
            <td class="column1 style118 f">713</td>
            <td class="column2 style118 f">1002</td>
            <td class="column3 style118 f">-288</td>
          </tr>
          <tr class="row8">
            <td class="column0 style0 n">7</td>
            <td class="column1 style118 f">832</td>
            <td class="column2 style118 f">1012</td>
            <td class="column3 style118 f">-180</td>
          </tr>
          <tr class="row9">
            <td class="column0 style0 n">8</td>
            <td class="column1 style118 f">951</td>
            <td class="column2 style118 f">1023</td>
            <td class="column3 style118 f">-72</td>
          </tr>
          <tr class="row10">
            <td class="column0 style0 n">9</td>
            <td class="column1 style118 f">1070</td>
            <td class="column2 style118 f">1034</td>
            <td class="column3 style118 f">37</td>
          </tr>
          <tr class="row11">
            <td class="column0 style0 n">10</td>
            <td class="column1 style118 f">1189</td>
            <td class="column2 style118 f">1044</td>
            <td class="column3 style118 f">145</td>
          </tr>
          <tr class="row12">
            <td class="column0 style0 n">11</td>
            <td class="column1 style118 f">1308</td>
            <td class="column2 style118 f">1055</td>
            <td class="column3 style118 f">253</td>
          </tr>
          <tr class="row13">
            <td class="column0 style0 n">12</td>
            <td class="column1 style118 f">1427</td>
            <td class="column2 style118 f">1066</td>
            <td class="column3 style118 f">361</td>
          </tr>
          <tr class="row14">
            <td class="column0 style0 n">13</td>
            <td class="column1 style118 f">1546</td>
            <td class="column2 style118 f">1077</td>
            <td class="column3 style118 f">469</td>
          </tr>
          <tr class="row15">
            <td class="column0 style0 n">14</td>
            <td class="column1 style118 f">1665</td>
            <td class="column2 style118 f">1087</td>
            <td class="column3 style118 f">578</td>
          </tr>
          <tr class="row16">
            <td class="column0 style0 n">15</td>
            <td class="column1 style118 f">1784</td>
            <td class="column2 style118 f">1098</td>
            <td class="column3 style118 f">686</td>
          </tr>
          <tr class="row17">
            <td class="column0 style0 n">16</td>
            <td class="column1 style118 f">1903</td>
            <td class="column2 style118 f">1109</td>
            <td class="column3 style118 f">794</td>
          </tr>
          <tr class="row18">
            <td class="column0 style0 n">17</td>
            <td class="column1 style118 f">2022</td>
            <td class="column2 style118 f">1119</td>
            <td class="column3 style118 f">902</td>
          </tr>
          <tr class="row19">
            <td class="column0 style0 n">18</td>
            <td class="column1 style118 f">2140</td>
            <td class="column2 style118 f">1130</td>
            <td class="column3 style118 f">1010</td>
          </tr>
          <tr class="row20">
            <td class="column0 style0 n">19</td>
            <td class="column1 style118 f">2259</td>
            <td class="column2 style118 f">1141</td>
            <td class="column3 style118 f">1119</td>
          </tr>
          <tr class="row21">
            <td class="column0 style0 n">20</td>
            <td class="column1 style118 f">2378</td>
            <td class="column2 style118 f">1152</td>
            <td class="column3 style118 f">1227</td>
          </tr>
<tr><td></td></tr>        </tbody>
    </table>

My JS:

    Highcharts.setOptions({
        lang: {
            thousandsSep: ','
        }
    });


        var chart = new Highcharts.Chart({
            colors: ["#cc1c0d", "#1d63af" , "#9eb215"],
            chart: {
                type: 'line',
                backgroundColor:'rgba(255, 255, 255, 0.85)',
                renderTo: 'container'
            },
         data: {
            table: 'sheet6',
            complete: function(options){
                var series = options.series[1],
                point = series.data[8];

                series.data[8] = {
                    x: point[0],
                    y: point[1],
                    marker: {
                        fillColor: '#1d63af',
                        symbol: 'circle',
                        radius: 4
                    }
                };
            }
          },
          title: {
              text: 'Cost Comparison: Manual vs. Automated Testing'
          },
          xAxis: {
              tickInterval:3,
              title: {
                  text: 'Months'
              },
          plotLines: [{
            color: '#d9d9d6',
            dashStyle: 'line',
            value: 0,
            width: 1   
          },
          {
            color: '#d9d9d6',
            dashStyle: 'line',
            value: 12,
            width: 1   
          },
          {
            color: '#d9d9d6',
            dashStyle: 'line',
            value: 24,
            width: 1   
          },
          {
            color: '#d9d9d6',
            dashStyle: 'line',
            value: 36,
            width: 1   
          },
          {
            color: '#d9d9d6',
            dashStyle: 'line',
            value: 48,
            width: 1   
          }],
          },
            plotOptions: {
                series: {
                    marker: {
                        symbol: 'circle',
                        radius: 3,
                        fillColor: '#FFFFFF',
                        lineWidth: 2,
                        lineColor: null // inherit from series
                    },
                    shadow: true
                }
            },
          yAxis: {
              allowDecimals: false,
              title: {
                  text: 'Cost [kUSD]'
              },
            labels: {
                formatter: function () {
                    return Highcharts.numberFormat(this.value,0);
                }
            }
          },
          credits: {
              enabled: false
          },
          tooltip: {
              headerFormat: '<b>{series.name}</b><br>',
              pointFormat: 'Month {point.x}: {point.y} kUSD'
          },
        });

You can see an example of this all in action under the following fiddle

I would really appreciate any pointers in the right direction.

this link would solve your problem. You should send data from MySQL using PHP and send the array of result as JSON into AJAX success function. Just read this link step by step https://blueflame-software.com/how-to-load-mysql-results-to-highcharts-using-json/ — androidnation, Apr 11 '16 at 06:37
Thanks, while your suggestion is possible, it would require us to re-write the way our application works, which is not within the scope of this question currently. I do appreciate your feedback though. — BrokenCode, Apr 11 '16 at 06:47

Martin Schneider · Accepted Answer · 2016-04-11T08:19:11.400

4

Your chart has only one symbol because you defined

plotOptions: {
  series: {
    marker: {
      symbol: 'circle',
      [...]

which sets the symbol to "circle" for all series.

If you remove that line then Highcharts will give each series it's own symbol (see http://api.highcharts.com/highcharts#series.marker.symbol). It will iterate through the predefined defaults which are "circle", "square", "diamond", "triangle" and "triangle-down".

If you want to customize the order you can provide it via a call to

Highcharts.setOptions({symbols:["triangle","square","diamond","circle"]});

edited Apr 11 '16 at 08:19

answered Apr 11 '16 at 06:57

Martin Schneider

3,268
4
19
29

True. I forgot about that, thanks for pointing it out. But how could I select which symbol appears for which series, let's say I want diamond for the first, square for the second and circle for the third series. – BrokenCode Apr 11 '16 at 07:01
I am not sure if you can redefine the default order but you can always add a specific symbol to each series individually by providing a `marker: {symbol: 'foo'}}` inside each data object. – Martin Schneider Apr 11 '16 at 07:09
That's my problem. I only have 1 data object since it's all coming dynamically from MySQL. – BrokenCode Apr 11 '16 at 07:13
I have found the solution: you can provide the desired order of the symbols in the Highcharts.setOptions-call like `Highcharts.setOptions({symbols:["triangle","square","diamond","circle"]});` – Martin Schneider Apr 11 '16 at 08:18

Sapikelio · Answer 2 · 2016-04-11T07:05:05.070

1

Highcharts exposes a symbolName property within its graphic object which is a property itself on the point object itself. The shapes it uses are:

1."circle" ●

2."diamond" ♦

3."square" ■

4."triangle" ▲

5."triangle-down" ▼

By default, highcharts alternate these different symbols on each serie, but, As you have defined symbol: 'circle', on your plot options, all series have the same symbol.

plotOptions: {
  series: {
    marker: {
      symbol: 'circle',
      [...]

To solve it remove symbol: 'circle'

Demo

edited Apr 11 '16 at 07:05

answered Apr 11 '16 at 06:54

Sapikelio

2,594
2
16
40

Thanks very much for pointing that out. Can I specify which series get's which symbol in my example above? – BrokenCode Apr 11 '16 at 07:04
Each serie gets the symbol in the order listed above – Sapikelio Apr 11 '16 at 07:07
If you want a custom image as symbol take a look at this http://stackoverflow.com/questions/25973920/how-to-display-highchart-series-line-marker-symbol-from-tooltip-formatter/25976671#25976671 – Sapikelio Apr 11 '16 at 07:10

Add different symbols to highcharts chart with dynamic data

2 Answers2