Highcharts chart creation using d3.csv

Question

This is in continued to my question here

I was having a lot of problems in creating highcharts basic charts using CSV data from my local filesystem without using a server/framework and just basic HTML/CSS/JS etc

So, finally, I got an idea to create a chart inside "d3.csv" function wherein we can add highchart functions insdie d3.csv ones

But, there seems to be something very silly wrong, I'm trying with a very basic code and table.

HTML code has only container div element,

Javascript

d3.csv("test.csv", function(data) {
  data.forEach(function(d) {
    name = d.name,
    apples = +d.apples

  });
  console.log(data[2]);


  dataset = data;

  //display();

  console.log(dataset[0]);
  console.log(dataset[0].name);

   function push(a)
  {

   var filter = [];

   for (i=0; i<a.length ; i++)
    {
      filter.push(a[i].apples);
      //console.log (filter);
    }
    return filter;
  }

  window.apples = push(dataset);


  console.log(apples);


 $(function () { 
    $('#container').highcharts({
        chart: {
            type : 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: [dataset[0].name, dataset[1].name]
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            data: apples 
            }
        ]
    });
})

});

test.csv : name,apples John,8 Jane,3

My console is showing "apples" correctly as [8,3]. I'm getting an empty graph on screen with only axes shown and nothing inside and also, x axis and y axis elements are interchanged.

What am I doing wrong here? Is the global variable - apples, not being accessed inside highcharts fucntions?

UPDATE :

Found the answer, but only one number is showing up. I have 2 more questions :

How do I show the whole series?
Is this a good method to draw highcharts or will I face many issues later?

Probably async loading file - have you tried to create chart **inside** `d3.csv` callback? — Paweł Fus, Dec 03 '15 at 14:29
@PawełFus : Yes, I have plotted many d3 charts inside "d3.csv" callback without a server/framework and in basic HTML/CSS. You should maybe add these features in highcharts for user convenience, later. For now, can you help me with the updated two questions above. — Pravin, Dec 03 '15 at 14:38
To be honest, it is the first time anyone asked (me) for such feature - of course, if it becomes common request, we probably add this to the core, or at least create a plugin for that. You can create an idea on our [user voice](http://highcharts.uservoice.com/forums/55896-general). — Paweł Fus, Dec 03 '15 at 14:44
And to answer your questions: It is very vulnerable to load local files so I think that answers #2 question. In terms of JS your code is fine. For the #1: change `data : [apples]` -> `data: apples` (wrong format for Highcharts). — Paweł Fus, Dec 03 '15 at 14:46
Thanks a lot @PawełFus . Finally able to load and plot the chart. However, could you tell a little more on what the problem could be later on? How much of an issue could it create, later on? — Pravin, Dec 03 '15 at 14:58
I can only send you to the questions I posted before: imagine you can load any file from the user local files, when entering any page, without user knowledge. All personal data from the machine would leak immediately ;) — Paweł Fus, Dec 03 '15 at 15:11

Pravin · Accepted Answer · 2015-12-03T14:57:50.187

Found the solution to this, myself, for a change.

Highcharts will expect function to be parsed in their format ( Highcharts error 14 in console)

Changed my function above to this,

 for (i=0; i<a.length ; i++)
    {
      x = a[i].apples;
      y = parseFloat(x)
      filter.push(y);
    }
    return filter;
  }

  window.apples = push(dataset);

And the series part to this :

 series: [{
            data : [apples]
            }
        ]

This is finally, giving me a graph with one bar (John, 8) now!!

The second number is still not being loaded, if someone wants to help with that, please comment below.

Update :

changed data : [apples] -> data: apples (Correct format)

Credits : PawelFus

Highcharts chart creation using d3.csv

1 Answers1