msleevi msleevi - 3 months ago 37
Jade Question

Chartist.js Type Errors

I am using chartist to track some metrics for a website and running into difficulties with the plotting. The major errors that I am seeing are the following

TypeError: a.series.map is not a function
TypeError: d.normalized[e].forEach is not a function


The first error occurs at line 8:3570 which likely doesn't help. And the second occurs at 8:27311 which also probably doesn't help, in the chartist.min.js plugin, here is a link to chartist min and chartist full and the following code results in these errors.

Jade snippet

body
.circle-box
block circle-box-content
body
h3.fine
span.small Percentage of Creators Involved in an Approved Video
hr.dfw
.ct-chart.metric.pciav(data-metrics="#{JSON.stringify(data.pciav.metrics)}" data-labels="#{JSON.stringify(data.pciav.labels)}")
hr.dfw
h3.fine
span.small Percentage of Creators Who Have Sent an Invite
hr.dfw
.ct-chart.metric.pcsi(data-metrics="#{JSON.stringify(data.pcsi.metrics)}" data-labels="#{JSON.stringify(data.pcsi.labels)}")
hr.dfw
h3.fine
span.small Percentage of Creators Who Have Uploaded a Video
hr.dfw
.ct-chart.metric.pcicv(data-metrics="#{JSON.stringify(data.pcicv.metrics)}" data-labels="#{JSON.stringify(data.pcicv.labels)}")
h3.fine
span.bold Number of Creators Accounts Created  
br
span.small Past 30 Days
hr.dfw.chart
.ct-chart.metric.ncac(data-metrics="#{JSON.stringify(data.ncac.metrics)}" data-labels="#{JSON.stringify(data.ncac.labels)}")

br
br
h3.fine
span.bold Total Videos Uploaded  
br
span.small Past 30 Days
hr.dfw.chart
.ct-chart.metric.tvu(data-metrics="#{JSON.stringify(data.tvu.metrics)}" data-labels="#{JSON.stringify(data.tvu.labels)}")

br
br

h3.fine
span.bold Percentage of Approved Videos  
br
span.small Past 30 Days
hr.dfw.chart
.ct-chart.metric.pav(data-metrics="#{JSON.stringify(data.pav.metrics)}" data-labels="#{JSON.stringify(data.pav.labels)}")

h3.fine
span.bold Average Number of Credits in Videos  
br
span.small Past 30 days
hr.dfw
.ct-chart.metric.ancv(data-metrics="#{JSON.stringify(data.ancv.metrics)}" data-labels="#{JSON.stringify(data.ancv.labels)}")


Javascript snippet

$(document).ready(function(){

...

var circleClass = ['.pciav', '.pcsi', '.pcicv'];

for (circle of circleClass) {
new Chartist.Pie('.ct-chart.metric'+circle, {
labels : $('.ct-chart.metric'+circle).data('labels'),
series : $('.ct-chart.metric'+circle).data('metrics')
});
}

...

var metricBarCharts = ['.ncac', '.tvu'];

for(barChart of metricBarCharts){
new Chartist.Bar('.ct-chart.metric'+barChart, {
labels: $('.ct-chart.metric'+barChart).data('labels'),
series: $('.ct-chart.metric'+barChart).data('metrics')
});
}

...

var metricLineCharts = ['.pav', '.ancv'];

for(lineChart of metricLineCharts){
new Chartist.Line('.ct-chart.metric'+lineChart, {
labels: $('.ct-chart.metric'+lineChart).data('labels'),
series: $('.ct-chart.metric'+lineChart).data('metrics')
});
}

}


Standard input for the pie chart:

series: 12
labels: 1


Standard input into the chartist labels/series combination for line/bar charts:

series = [91,91,91,91,91,93,93,93,93,95,95,96,97,98,98,98,100,101,101,101,101,101,101,102,102,102,102,102,102,102,103]

labels = ['Jul 19','Jul 20','Jul 21','Jul 22','Jul 23','Jul 24','Jul 25','Jul 26','Jul 27','Jul 28','Jul 29','Jul 30','Jul 31','Aug 01','Aug 02','Aug 03','Aug 04','Aug 05','Aug 06','Aug 07','Aug 08','Aug 09','Aug 10','Aug 11','Aug 12','Aug 13','Aug 14','Aug 15','Aug 16','Aug 17','Aug 18']


Please let me know if there is additional information that I can provide. I tried to reduce the amount of content to what I thought was necessary.

Answer

The problem stems from the series input into the chartist bar and line charts. Chartist takes in inputs as nested arrays, to allow for the plotting of multiple series. So even if only one series is being plotted you are required to have a nested array. Thus the resulting series/labels combination would appear as so.

Series/Labels:

series = [[91,91,91,91,91,93,93,93,93,95,95,96,97,98,98,98,100,101,101,101,101,101,101,102,102,102,102,102,102,102,103]]

labels = ['Jul 19','Jul 20','Jul 21','Jul 22','Jul 23','Jul 24','Jul 25','Jul 26','Jul 27','Jul 28','Jul 29','Jul 30','Jul 31','Aug 01','Aug 02','Aug 03','Aug 04','Aug 05','Aug 06','Aug 07','Aug 08','Aug 09','Aug 10','Aug 11','Aug 12','Aug 13','Aug 14','Aug 15','Aug 16','Aug 17','Aug 18']