CuriousGoldie
Posts: 5
Joined: Wed Jul 18, 2018 3:39 pm

Bubble Chart not displaying - using CSV as data load

Hello,

Can someone please help me troubleshoot why my chart is not showing? I followed the example on the demo except that I am calling a CSV file. Since I can't upload the csv file, it is an image of the CSV file.
Image of the csv data fiile
Image of the csv data fiile
test.jpg (64.78 KiB) Viewed 470 times
I included all these js:

Code: Select all

  <script type="text/javascript" src="Highcharts-6.1.1/code/highcharts.js"></script>
  <script type="text/javascript" src="Highcharts-6.1.1/code/highcharts-more.js"></script>
  <script type="text/javascript" src="Highcharts-6.1.1/code/highcharts-3d.js"></script>
  <script type="text/javascript" src="Highcharts-6.1.1/code/modules/data.js"></script>  
  <script type="text/javascript" src="Highcharts-6.1.1/code/modules/series-label.js"></script>
  <script type="text/javascript" src="Highcharts-6.1.1/code/modules/exporting.js"></script>      
  <script type="text/javascript" src="Highcharts-6.1.1/code/modules/offline-exporting.js"></script> 
Here is the script to create the highchart:

Code: Select all

       
<script>   
Highcharts.chart('risk-heatmap-container', {
    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },
    data: {
      csvURL: window.location.origin + '/data/csv/test.csv'
    },   
    legend: {
        enabled: false
    },
    title: {
        text: 'Bubble Mapping'
    },
    subtitle: {
        text: 'Testing'
    },
    xAxis: {
      gridLineWidth: 1,
      title: {
        text: 'X Axis'
      },
      labels: {
        format: '{value} gr'
      },
      plotLines: [{
        color: 'black',
        dashStyle: 'dot',
        width: 2,
        value: 4,
        label: {
            rotation: 0,
            y: 15,
            style: {
                fontStyle: 'italic'
            },
            text: 'Tolerance Level 4'
        },
        zIndex: 3
      }]
    },
    yAxis: {
      startOnTick: false,
      endOnTick: false,
      title: {
        text: 'Y Axis Label'
      },
      labels: {
        format: '{value} gr'
      },
      maxPadding: 0.2,
      plotLines: [{
        color: 'black',
        dashStyle: 'dot',
        width: 2,
        value: 40,
        label: {
            align: 'right',
            style: {
                fontStyle: 'italic'
            },
            text: 'Score Level 40',
            x: -10
        },
        zIndex: 3
      }]
    },
    tooltip: {
      useHTML: true,
      headerFormat: '<table>',
      pointFormat: '<tr><th colspan="2"><h3>{point.FullName}</h3></th></tr><tr><th>X:</th><td>{point.x}g</td></tr><tr><th>Y:</th><td>{point.y}g</td></tr><tr><th>Total</th><td>{point.z}%</td></tr>',
      footerFormat: '</table>',
      followPointer: true
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          format: '{point.name}'
        }
      }
    },
    series: []
});    
</script>       
        
CuriousGoldie
Posts: 5
Joined: Wed Jul 18, 2018 3:39 pm

Re: Bubble Chart not displaying - using CSV as data load

I figure it out. Instead of reading CSV file, I created an array and in the javascript, I read it as json.

Code: Select all

var bMap = <?php echo json_encode($dArray); ?>;

Code: Select all

series: [{ data: bMap}]

Return to “Highcharts Usage”