Trying to get a stacked chart to show up on page, so far have axes showing but no plot and no errors...
Have used the same data for other charts with no problems, so I feel that the data is OK, and general methodology is correct. But can't find what is wrong
js code used to bind
$("#drchart").igDataChart({ width: "100%", height: "300px", title: "Proportion of area under category", dataSource: gldata, axes: [ { name: "xAxisdr", type: "categoryDateTimeX", dateTimeMemberPath: "Date", labelVisibility: "visible", formatLabel: function(value){ return value.toString('MMMM yyyy'); }, title: "Time" }, { name: "yAxisdr", type: "numericY", title: "Proportion within Category", labelVisibility: "visible" } ], series: [function () { // a self executing function to create the series initialization object var seriesObj = { name: "parent", xAxis: "xAxisdr", yAxis: "yAxisdr", type: "stacked100SplineArea", outline: "transparent", dataSource: gldata, series: [ { name: "gt95", type: "stackedFragment", valueMemberPath: "gt95" }, { name: "gt925", type: "stackedFragment", valueMemberPath: "gt925" }, { name: "gt90", type: "stackedFragment", valueMemberPath: "gt90" }, { name: "gt70", type: "stackedFragment", valueMemberPath: "gt70" }, { name: "gt50", type: "stackedFragment", valueMemberPath: "gt50" }, { name: "gt30", type: "stackedFragment", valueMemberPath: "gt30lt50" }, { name: "lt30", type: "stackedFragment", valueMemberPath: "lt30" }, { name: "lt10", type: "stackedFragment", valueMemberPath: "lt10" }, { name: "lt75", type: "stackedFragment", valueMemberPath: "lt75" }, { name: "lt5", type: "stackedFragment", valueMemberPath: "lt5" }] }; return seriesObj; }()], horizontalZoomable: true, verticalZoomable: false, windowResponse: "immediate"});
have attached the data file I'm using, a comma separated file.
here the code I use to convert gl.csv to js object
getCSVFile('./data/gl.csv', function(csvobj){ gldata = csvobj; $.each(gldata,function(indx,val){ val.Date = Date.parse(val.Date); });});
function getCSVFile(fileurl, callback){ var txtFile = new XMLHttpRequest(); txtFile.onreadystatechange = function () { if (txtFile.readyState == 4 && txtFile.status == 200) { var csvobj = $.csv.toObjects(txtFile.responseText); callback(csvobj); } }; txtFile.open("GET", fileurl, true); txtFile.send();}
using Date.js for date conversions.
What am I doing wrong?
David
Found that the data handling of the stacked chart is different from the standard chart.
Standard chart handles numbers as strings where the stacked version don't.
So changed the csv file handling to Papa Parse
Papa.parse('./data/gl.csv',{ download: true, dynamicTyping: true, header: true, complete: function(data) { gldata = data.data; $.each(gldata,function(i,d){ d.Date = Date.parse(d.Date); }); }});
Works a charm now.
Has infragistics got a csv file reader?
Hello David,
I'm glad you have resolved your issue.
Unfortunately, we do not have a csv parser like Papa Parse in Ignite UI product.
If you have any other questions, please do not hesitate to ask.
Thank you,Mihoko Kamiishi