i have set simple column chart in highcharts 4 jquery 1.9.1 parse csv file. normal page showing column chart, when click on bar nothing happens. see arrays being created in console (ie11) , appear need, in correct syntax , ids match.
this first time asking online, , first jsfiddle please bare me. js fiddle [was...://jsfiddle.net/tjxwty3y/ ... have changed in edit @ bottom ] . put example of csv use, not know how link external 1 js fiddle. have tried examples csv/tsvs embedded in code , have worked, think has how pushing data, hence external reference.
the csv simple. have 3 categories in first column, values front chart, followed ids in 3rd , drilldown values in 4th , 5th.
csv looks area,value,type,shift1,shift2 blog1,50000,blog1_shift,5,6 blog2,60000,blog2_shift,2,3 blog3,40000,blog3_shift,7,8 i have looked @ multiple posts (and videos) csv or tsv within js fiddle , on highcharts website, not seeing have gone wrong (and know have).
just in case, here raw data js fiddle has libraries (i typically use higcharts 4 , jquery 1.11 here i've modified older code used jquery 1.9.1):
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> - jsfiddle demo</title> <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type='text/javascript' src="http://code.highcharts.com/highcharts.js"></script> <script type='text/javascript' src="http://code.highcharts.com/modules/data.js"></script> <script type='text/javascript' src="http://code.highcharts.com/modules/drilldown.js"></script> <style type='text/css'></style> <script type='text/javascript'> //<![cdata[ $(window).load(function () { $(document).ready(function () { var options = { chart: { renderto: 'container', type: 'column' }, title: { text: 'my title here' }, xaxis: { categories: [], name: [] }, yaxis: { title: { text: 'value here' } }, legend: { layout: 'vertical', align: 'right', verticalalign: 'top', y: 15, borderwidth: 0, itemstyle: { color: '#333', fontsize: '15px', }, navigation: { activecolor: '#3e576f', animation: true, arrowsize: 12, inactivecolor: '#ccc', style: { fontweight: 'bold', color: '#333', fontsize: '15px', } } }, tooltip: { shared: true, crosshairs: true }, plotoptions: { series: { marker: { linewidth: 1 } } }, series: [], drilldown: [] }; $.get("http://my/csv/notvalid/dev_drilldown4.csv", function (csvdata) { var lines = csvdata.split('\n'); var series = { data: [], visible: true, type: 'column', colorbypoint: true, drilldown: true }; var drilldown = { series: [] }; $.each(lines, function (lineno, line) { if (lineno > 0 && lineno < 4) { var items = line.split(','); var seriesname = string(items[0]); // area var area_cost = parsefloat(items[1]); // data rollup var drill_id = string(items[2]); // id of drilldown var shift_one_value = parsefloat(items[3]); // shift1 value var shift_two_value = parsefloat(items[4]); // shift2 value series.data.push({ name: seriesname, y: area_cost, drilldown: drill_id }); drilldown.series.push({ id: drill_id, data: [["shift1", shift_one_value],["shift2", shift_two_value]] }); } }); console.log(series.data); console.log(drilldown.series); options.series.push({ data: series.data }); options.drilldown.push({ series: drilldown.series }); var chart = new highcharts.chart(options); }); }); }); </script> </head> <body> <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> </body> </html> i appreciate help/advice. thanks
edit: have added in salman's , pawell's edits, including adding in csv jsfiddle (see pawell's jsfiddle looks like) encountered additional issue, is/was working now!
i realized forgot "name" of series , added in, adjusting 'var series' , changing 'series.data.push' 'series.push' , watched log mentioned salman. nothing appears, console log appears show data names, ids , data, no chart (and no error).
the js fiddle is: http://jsfiddle.net/5jzb8hzb/1/. know why changing 'series.data.push' caused initial chart not render?
as noticed @salman, there couple of issues:
- first load highcahrts drilldown.js (issue in jsfiddle)
- you shouldn't push drilldown array, assign created series
- you have
drilldown: [], while shoulddrilldown: {} - for series have
options.series.push({ data: series.data }), while useoptions.series.push(series)oroptions.series = [series]
extra note: suggest check values if not nan's - editors create empty new line @ end of file.
after fixes, here working code: http://jsfiddle.net/tjxwty3y/7/
minimized example:
var options = { chart: { renderto: 'container' }, series: [], drilldown: {} }; var csvdata = document.getelementbyid("data").innerhtml; // $.get() var lines = csvdata.split('\n'); var series = { data: [], visible: true, type: 'column', colorbypoint: true, drilldown: true }; var drilldown = { series: [] }; // know below line can deal when rest of data sorted $.each(lines, function (lineno, line) { if (lineno > 0 && lineno < 4) { var items = line.split(','); var seriesname = string(items[0]); // area name var area_cost = parsefloat(items[1]); // data area rollup var drill_id = string(items[2]); // id of drilldown var shift_one_value = parsefloat(items[3]); // drilldown shift1 value var shift_two_value = parsefloat(items[4]); // drilldown shift2 value if(!isnan(area_cost) && !isnan(shift_one_value) && !isnan(shift_two_value)) { series.data.push({ name: seriesname, y: area_cost, drilldown: drill_id }); drilldown.series.push({ id: drill_id, data: [ ["shift1", shift_one_value], ["shift2", shift_two_value] ] }); } } }); options.series = [series]; options.drilldown = drilldown; var chart = new highcharts.chart(options); 
Comments
Post a Comment