chart.js data forming though the API dynamically based on selects

Question

I got a task of moving from morris.js to chart.js and I'm trying to form data for chart.js based on conditionals. I have multiple selects - source, metric, accounts and a few more. I need to form the data according to the values of those selects (multiselect), for example:

<select id="metric" class="form-control" id="type" multiple="multiple">
    <option value="6" selected>first metric</option>
    <option value="7">Other metric</option>
    <option value="8">Third metric</option>
    <option value="9">fourth metric</option>
    ...
    <option value="0">final metric</option>
</select>

I need a line chart, so I need an array of objects (datasets) for each of these options which are selected and colors for them, metric id (value of the option), date because the dates are the Y axis. What's the best way to approach this? We already have an API that returns data like this:

[{"date":"2018-09-15","6":"5925.26","0":5925.26},{"date":"2018-09-16","6":"5920.33","0":5920.33},{"date":"2018-09-17","6":"3251.72","0":3251.72},{"date":"2018-09-18","6":"3375.16","0":3375.16},{"date":"2018-09-19","6":"3499.05","0":3499.05},{"rand":"0.36841474432984667"}]

objects for each day instead of objects for each subject. There might be empty metrics/missing metrics in each day. We approached this by parsing the selects with js and assigning value based indexes with names and made custom Y labels and X labels. This approach of chartjs is much different from what we used before. Whats the best way to make this work without the need to remake the API? I'm having trouble wrapping my head around the object oriented javascript, it's very different from other languages I have interacted with, and seems weird creating new objects and then pushing them to an array the javascript way. Any tips? Or some examples of how this is achieved without knowing which selects are selected and forming the datasets automatically without hardcoding of values/labels?

score 0 · Answer 1 · answered Oct 15 '18 at 15:04

the first step is to create individual datasets(arrays) for "date","6" and "0".you can use the map function in javascript to create these datasets.for example,if the API data is stored in a variable called obj then,

 labels=obj.map(function(e) {
  return e["date"];
  })

the labels will have the date information,then for the "6","0"

var data1={
label:"6",
data: obj.map(function(e) {
 return e["6"]
 },
backgroundColor:"red"

}

data1 will conatin the data from "6";NOTE:the data from "6" is in string format,inorder to use it in the chart you need to parse the value into float or integer before returning in the above step.and similarly for "0"(ie., data2).the color attribute is also added above. if you need both data1 and data2 in the same chart,then create a combined dataset like this

    data={data1,data2}

then create the chart by providing the above values

new Chart(document.getElementById("myChart"), {
  type: 'bar',
  data: {
  labels:labels,
  datasets:data
  }
 }

this is simplest example i could come up with,Hope it helps

Hey, thats something in the right direction, although I need to load data objects based on the select — dumbQuestions, Oct 16 '18 at 05:43
i would suggest a easy way to do that is..you can load all the datasets before hand into chart then use the LEGEND feature in chartjs to display a particular dataset.this isnt what you asked but give it a try — bharath kumar, Oct 16 '18 at 06:59

chart.js data forming though the API dynamically based on selects

1 Answers1