charts - Getting series and values from CSV data in Zingchart -

while creating mixed chart in zingchart can pass type attribute values values array. i'm not sure when reading data csv how can achieved. want create mixed chart on fiddle link below data read csv file.

  var myconfig =         {        "type":"mixed",        "series":[          {            "values":[51,53,47,60,48,52,75,52,55,47,60,48],            "type":"bar",            "hover-state":{              "visible":0            }          },          {            "values":[69,68,54,48,70,74,98,70,72,68,49,69],            "type":"line"          }        ]      }    zingchart.render({   	id : 'mychart',   	data : myconfig,   	height: 500,   	width: 725   });

<script src="https://cdn.zingchart.com/zingchart.min.js"></script>  <div id="mychart"></div>

i put demo using sample data provided in one of related questions. if go this demo page , upload csv provided, should chart:

zingchart includes csv parser basic charts, more complex case requires bit of preprocessing data needs be. used papaparse demo, there other parsing libraries available.

here's javascript. i'm using simple file input in html csv.

var csvdata; var limit = [],     normal = [],     excess = [],     dates = []; var myconfig = {     theme: "none",     "type": "mixed",     "scale-x": {         "items-overlap":true,         "max-items":9999,         values: dates,         guide: {             visible: 0         },         item:{             angle:45             }      },     "series": [{         "type": "bar",         "values": normal,         "stacked": true,         "background-color": "#4372c1",         "hover-state": {             "visible": 0         }     }, {         "type": "bar",         "values": excess,         "stacked": true,         "background-color": "#eb7d33",         "hover-state": {             "visible": 0         }     }, {         "type": "line",         "values": limit     }] };  /* file , parse papaparse */ function parsefile(e) {     var file = e.target.files[0];     papa.parse(file, {         delimiter: ",",         complete: function(results) {             results.data.shift(); //the first array header values, don't need these             csvdata = results.data;             prepchart(csvdata);         }     }); }  /* process results papaparse(d) csv , populate   ** arrays each chart series , scale-x values  */ function prepchart(data) {     var excessval;      //papaparse data in 2d array     (var = 0; < data.length; i++) {          //save reference excess value         //cast numeric values int (they're strings)         var excessval = parseint(data[i][4]);          //date, limit value, , normal value can pushed arrays         dates.push(data[i][0]);         limit.push(parseint(data[i][1]));         normal.push(parseint(data[i][3]));          /* must push null value excess         ** series if there no excess node         */         if (excessval == 0) {             excess.push(null);         } else {             excess.push(excessval);         }     }     //render chart     zingchart.render({         id: 'mychart',         data: myconfig,         height: 500,         width: 725     }); } $(document).ready(function() {     $('#csv-file').change(parsefile); });