Related
I am currently trying to do a chart with chart.js, and I would like to get the total number of sales over a year in 1 month increments. I'm currently wondering how to break down the number of sales I make every month knowing that I have the "created_at" column for each order. I know how to do the total for each month with a foreach loop, but to cut out the sales and put the total in a table, I don't see how I could do it.
This is what my table looks like:
This is what my chart looks like:
moment().locale('fr');
var canvas = document.getElementById("bellegaiaChart");
var ctx = canvas.getContext('2d');
// Global Options:
Chart.defaults.global.defaultFontColor = 'black';
Chart.defaults.global.defaultFontSize = 16;
var data = {
labels: ["Jan", "Fev", "Mar", "Avr", "Mai", "Juin", "Jui", "AoĆ»", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Ventes",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(225,0,0,0.4)",
borderColor: "red", // The main line color
borderCapStyle: 'square',
borderDash: [], // try [5, 15] for instance
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "black",
pointBackgroundColor: "white",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: true
data: [65, 59, 80, 81, 56, 110, 40 ,60,55,30,78],
spanGaps: false,
}, {
label: "Nouveaux Clients",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(167,105,0,0.4)",
borderColor: "rgb(167, 105, 0)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "white",
pointBackgroundColor: "black",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "brown",
pointHoverBorderColor: "yellow",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: false
data: [10, 20, 60, 95, 64, 78, 90,70,40,70,89, 73],
spanGaps: false,
}
]
};
// Notice the scaleLabel at the same level as Ticks
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Moola',
fontSize: 20
}
}]
}
};
// Chart declaration:
var myBarChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
This chart is currently integrated in my blade view.
The goal would be to have a table containing all the sales totals per month (so 12 entries in the table) in order to be able to specify it in the data of my chart.
I want to plot scatter plots from a JSON variable (list of lists; in the format needed for Chart JS scatter plots) that I passed from Flask.
render_template('chart.html',data2 = data2)
The below code when I manually create datasets using jinja variable {{data2}} is working:
var chartData = {
datasets : [{
label: 'Cluster 1',
fill: false,
showLine: false,
lineTension: 0.1,
backgroundColor: "green",
borderColor: "black", // The main line color
borderCapStyle: 'square',
borderDash: [], // try [5, 15] for instance
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "green",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: true
data :{{data2[0]}},
spanGaps: true,
},
{
label: 'Cluster 2',
fill: false,
showLine: false,
lineTension: 0.1,
backgroundColor: "blue",
borderColor: "black", // The main line color
borderCapStyle: 'square',
borderDash: [], // try [5, 15] for instance
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "blue",
pointBackgroundColor: "blue",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: true
data :{{data2[1]}},
spanGaps: true,
},
{
label: 'Cluster 3',
fill: false,
showLine: false,
lineTension: 0.1,
backgroundColor: "red",
borderColor: "black", // The main line color
borderCapStyle: 'square',
borderDash: [], // try [5, 15] for instance
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "red",
pointBackgroundColor: "red",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: true
data :{{data2[2]}},
spanGaps: true,
},.....so on
// get chart canvas
var holder = document.getElementById("myChart2");
var ctx = document.getElementById("myChart2").getContext("2d");
// create the chart using the chart canvas
var myChart = new Chart(ctx, {
type: 'scatter',
data: chartData,
options: {
scales: {
xAxes: [{
display: true,
ticks: {
beginAtZero: true,
autoSkip: true,
autoSkipPadding: 30,
stepSize: 500,
maxTicksLimit: 10
},
scaleLabel: {
display: true,
labelString: 'Days',
fontStyle: 'bold'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Oil Rate',
fontStyle: 'bold'
}
}]
}
}
});
But when I use tojson and use the same variable in a for loop its not working (Rendering a blank chart):
var ds = []
var d2 = {{data2|tojson}}
for (var j=0; j < {{o}}; j++){
ds.push ({
label: 'Cluster' +j,
fill: false,
showLine: false,
lineTension: 0.1,
backgroundColor: colorlist[j],
borderColor: colorlist[j], // The main line color
borderCapStyle: 'square',
borderDash: [], // try [5, 15] for instance
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "green",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
// notice the gap in the data and the spanGaps: true
data :d2[j],
spanGaps: true,
});
}
var chartData2 = {
datasets : ds
}
var holder = document.getElementById("myChart2");
var ctx = document.getElementById("myChart2").getContext("2d");
// create the chart using the chart canvas
var myChart2 = new Chart(ctx, {
type: 'scatter',
data: chartData2,
options: {
scales: {
xAxes: [{
display: true,
ticks: {
beginAtZero: true,
autoSkip: true,
autoSkipPadding: 30,
stepSize: 500,
maxTicksLimit: 10
},
scaleLabel: {
display: true,
labelString: 'Days',
fontStyle: 'bold'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Oil Rate',
fontStyle: 'bold'
}
}]
}
}
});
For more clarity, this is how my data2 was created for scatter chart js:
x2 = {}
y2 = {}
data = {}
for i in n:
x2[i] = list(df_no_anamolies['Days'[df_no_anamolies["clusters_oilvsDays"]==i])
y2[i] = list(df_no_anamolies['Oil_rate(stb/d)'[df_no_anamolies["clusters_oilvsDays"]==i])
T = []
for j,k in zip(x2[i],y2[i]):
T.append({'x': j, 'y': k})
data[i] = str(T).replace('\'', '')
dt2 = list(data.items())
data2 = []
for i in range(len(dt2)):
data2.append(dt2[i][1])
This how my data2 looks like:
['[{x: 429, y: 21862.782000000003}, {x: 430, y: 21769.1868}]',
'[{x: 431, y: 21752.5183}, {x: 432, y: 21406.0022}]',
'[{x: 433, y: 20823.7369},'[{x: 434, y: 21101.5033}]',
'[{x: 435, y: 22031.354}, {x: 434, y: 21101.5033}]'....]
Can someone help me with how to do this with a loop.
Your "Y" objects are Decimal objects and the JsonEnconder doesn't accept Decimal objects. I usually just create a subclass of the json.JSONEncoder.
class DecimalEncoder(json.JSONEncoder):
def _iterencode(self, o, markers=None):
if isinstance(o, decimal.Decimal):
return (str(o) for o in [o])
return super(DecimalEncoder, self)._iterencode(o, markers)
then you can use it as
json.dumps({'Y': decimal.Decimal('21769.1868')}, cls=DecimalEncoder)
I think you'll need to parse those json strings before passing them to chart.js
var chartData2 = {
datasets : [{label: 'Cluster 1',
fill: false,
showLine: false,
lineTension: 0.1,
backgroundColor: "green",
borderColor: "black",
borderCapStyle: 'square',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "green",
pointBackgroundColor: "green",
pointBorderWidth: 1,
pointHoverRadius: 8,
pointHoverBackgroundColor: "yellow",
pointHoverBorderColor: "brown",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
data : JSON.parse( {{ data[1] }} ),
spanGaps: true,
}]
}
i have this code and run it,but i want cahnge source to alpha vantage?
this api is :
https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=aapl&apikey=
how i can use this api in my code,
and my code is :
<html>
<head>
</head>
<body>
<canvas id="QGL_Chart"></canvas>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script>
var dates = ['a', 'b', 'c', 'd', 'e', 'f', 'h'];
var open = [1,2,3,4,2,5,1];
var high = [7,4,3,3,3,4,6];
var low = [7,2,2,4,7,6,3];
var close = [9,5,3,4,2,3,4];
var volume = [4,2,1,5,3,6,8];
var ctx = document.getElementById("QGL_Chart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: data = {
labels: [dates[0], dates[1], dates[2], dates[3], dates[4], dates[5], dates[6]],
datasets: [
{
type: 'line',
label: "Open",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(75, 214, 238)',
borderColor: 'rgb(75, 214, 238)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(75, 214, 238)',
pointBackgroundColor: 'rgb(75, 214, 238)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(75, 214, 238)',
pointHoverBorderColor: 'rgb(75, 214, 238)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [open[0], open[1], open[2], open[3], open[4], open[5], open[6]],
},
{
type: 'line',
label: "High",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(210, 221, 72)',
borderColor: 'rgb(210, 221, 72)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(210, 221, 72)',
pointBackgroundColor: 'rgb(210, 221, 72)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(210, 221, 72)',
pointHoverBorderColor: 'rgb(210, 221, 72)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [high[0], high[1], high[2], high[3], high[4], high[5], high[6]],
},
{
type: 'line',
label: "Low",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(238, 79, 75)',
borderColor: 'rgb(238, 79, 75)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(238, 79, 75)',
pointBackgroundColor: 'rgb(238, 79, 75)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(238, 79, 75)',
pointHoverBorderColor: 'rgb(238, 79, 75)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [low[0], low[1], low[2], low[3], low[4], low[5], low[6]],
},
{
type: 'line',
label: "Close",
fill: false,
yAxisID: 'y-axis-a',
lineTension: 0.1,
backgroundColor: 'rgb(28, 175, 154)',
borderColor: 'rgb(28, 175, 154)',
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(28, 175, 154)',
pointBackgroundColor: 'rgb(28, 175, 154)',
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: 'rgb(28, 175, 154)',
pointHoverBorderColor: 'rgb(28, 175, 154)',
pointHoverBorderWidth: 3,
pointRadius: 5,
pointHitRadius: 10,
data: [close[0], close[1], close[2], close[3], close[4], close[5], close[6]],
},
{
label: 'Volume', //1D2939
yAxisID: 'y-axis-b',
data: [volume[0], volume[1], volume[2], volume[3], volume[4], volume[5], volume[6]],
barPercentage: '1',
categoryPercentage: '1',
backgroundColor: 'rgb(29, 41, 57)',
borderColor: 'rgb(29, 41, 57)',
borderWidth: '1',
borderSkipped: 'bottom',
hoverBackgroundColor: 'rgb(29, 41, 57)',
hoverBorderColor: 'rgb(29, 41, 57)',
hoverBorderWidth: '3',
},
]
},
options: {
title: {
display: true,
text: 'Share Price - Past 7 Days',
fontSize: '20',
fontFamily: 'Open Sans, sans-serif',
// fontColor
// fontStyle
// padding
// lineHeight
},
scales: {
xAxes: [{
ticks: {
min: 0
}
}],
yAxes: [{
position: "left",
id: "y-axis-a",
}, {
position: "right",
id: "y-axis-b",
}]
}
}
});
</script>
</html>
code is run and show result but i need use api in this code,thanks for read my problem,pls help me
You do not need to have all of this code.change your code like this code
$(function () {
var urls = 'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=aapl&apikey=';
$.ajax({
url: urls,
dataType: 'json',
contentType: "application/json",
success: function (data) {
console.log(data['Time Series (Daily)']);
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data['Time Series (Daily)'],
i = 0;
for(var time in dataLength)
{
var stock_info = dataLength[time];
ohlc.push([
time,
Number(stock_info["1. open"]),
Number(stock_info["2. high"]),
Number(stock_info["3. low"]),
Number(stock_info["4. close"])
]);
volume.push([
time, // the date
Number(stock_info["5. volume"]) // the volume
]);
}
....
I am pretty new to using Javascript, so forgive me if this is a nobish question.
I am trying to make a chart with 4 datasets, where 3rd dataset is stacked with 1st and 4th is stacked with 2nd. I've tried using the grouped stacked bar chart, but it just stacks 3rd and 4th on the 2nd.
I've tested using some standard inputs like in the link below.
The below approach works fine with 1 chart, just doesn't seem to work on multiple charts on the same page, as it tries to run the plugin on both charts as soon as the first one is done, which means the 2nd is not done rendering.
How to add an offset to a dataset in Chart js
I've tried using the inline plugin approach from the chart.js doc, but it still runs on both charts.
Is there anyway to get the specific chart instance or is there some other approach to this?
var ctx = document.getElementById("myChartTEC").getContext("2d");
var myChart = new Chart.Line(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC", ""],
datasets: [{
data: [5, 10.5, 18.2, 33.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
pointLabelFontSize: 4,
borderWidth: 2,
fill: false,
lineTension: .3,
borderColor: "#f37029",
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'bevel',
pointBorderColor: "#f37029",
pointBackgroundColor: "#f37029",
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
spanGaps: false,
},
{
data: [10, 20, 5.2, 35.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
pointLabelFontSize: 4,
borderWidth: 2,
fill: false,
lineTension: .3,
borderColor: "#f37029",
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'bevel',
pointBorderColor: "#f37029",
pointBackgroundColor: "#f37029",
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
spanGaps: false,
}
]
},
plugins: [{
afterUpdate: function (chart) {
var dataset = chart.config.data.datasets[0];
var offset = -20;
for (var i = 0; i < dataset._meta[0].data.length; i++) {
var model = dataset._meta[0].data[i]._model;
model.x += offset;
model.controlPointNextX += offset;
model.controlPointPreviousX += offset;
}
var dataset2 = chart.config.data.datasets[1];
var offset2 = 20;
for (var o = 0; o < dataset2._meta[0].data.length; o++) {
var model2 = dataset2._meta[0].data[o]._model;
model2.x += offset2;
model2.controlPointNextX += offset2;
model2.controlPointPreviousX += offset2;
}
}
}],
options: {
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true,
display: false,
borderDash: [6, 2],
tickMarkLength: 5
},
ticks: {
fontSize: 8,
labelOffset: 10,
maxRotation: 0
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
max: 200,
min: 0,
stepSize: 20,
fontSize: 8
}
}]
},
legend: {
display: false
},
responsive: false,
maintainAspectRatio: true
}
});
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart.Line(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC", ""],
datasets: [{
data: [5, 10.5, 18.2, 33.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
pointLabelFontSize: 4,
borderWidth: 2,
fill: false,
lineTension: .3,
borderColor: "#f37029",
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'bevel',
pointBorderColor: "#f37029",
pointBackgroundColor: "#f37029",
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
spanGaps: false,
},
{
data: [10, 20, 5.2, 35.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
pointLabelFontSize: 4,
borderWidth: 2,
fill: false,
lineTension: .3,
borderColor: "#f37029",
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'bevel',
pointBorderColor: "#f37029",
pointBackgroundColor: "#f37029",
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
spanGaps: false,
}]
},
// This part is not working. Uncaught TypeError: Cannot read property 'data' of undefined
plugins: [{
afterUpdate: function (chart) {
var dataset = chart.config.data.datasets[0];
var offset = -20;
for (var i = 0; i < dataset._meta[0].data.length; i++) {
var model = dataset._meta[0].data[i]._model;
model.x += offset;
model.controlPointNextX += offset;
model.controlPointPreviousX += offset;
}
var dataset2 = chart.config.data.datasets[1];
var offset2 = 20;
for (var o = 0; o < dataset2._meta[0].data.length; o++) {
var model2 = dataset2._meta[0].data[o]._model;
model2.x += offset2;
model2.controlPointNextX += offset2;
model2.controlPointPreviousX += offset2;
}
}
}],
options: {
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true,
display: false,
borderDash: [6, 2],
tickMarkLength: 5
},
ticks: {
fontSize: 8,
labelOffset: 10,
maxRotation: 0
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
max: 200,
min: 0,
stepSize: 20,
fontSize: 8
}
}]
},
legend: {
display: false
},
responsive: false,
maintainAspectRatio: true
}
});
The issue is, whenever you create an inline-plugin for a new chart instance, you would also need to increase the index number of _meta[index] in both the for loops. SO, for the first chart it will be _meta[0] , second chart _meta[1] , third chart _meta[2] and so on ...
Here is the working version of your code ...
var ctx = document.getElementById("myChartTEC").getContext("2d");
var myChart = new Chart.Line(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC", ""],
datasets: [{
data: [5, 10.5, 18.2, 33.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
pointLabelFontSize: 4,
borderWidth: 2,
fill: false,
lineTension: .3,
borderColor: "#f37029",
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'bevel',
pointBorderColor: "#f37029",
pointBackgroundColor: "#f37029",
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
spanGaps: false,
}, {
data: [10, 20, 5.2, 35.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
pointLabelFontSize: 4,
borderWidth: 2,
fill: false,
lineTension: .3,
borderColor: "#f37029",
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'bevel',
pointBorderColor: "#f37029",
pointBackgroundColor: "#f37029",
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
spanGaps: false,
}]
},
plugins: [{
afterUpdate: function(chart) {
var dataset = chart.config.data.datasets[0];
var offset = -20;
for (var i = 0; i < dataset._meta[0].data.length; i++) {
var model = dataset._meta[0].data[i]._model;
model.x += offset;
model.controlPointNextX += offset;
model.controlPointPreviousX += offset;
}
var dataset2 = chart.config.data.datasets[1];
var offset2 = 20;
for (var o = 0; o < dataset2._meta[0].data.length; o++) {
var model2 = dataset2._meta[0].data[o]._model;
model2.x += offset2;
model2.controlPointNextX += offset2;
model2.controlPointPreviousX += offset2;
}
}
}],
options: {
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true,
display: false,
borderDash: [6, 2],
tickMarkLength: 5
},
ticks: {
fontSize: 8,
labelOffset: 10,
maxRotation: 0
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
max: 200,
min: 0,
stepSize: 20,
fontSize: 8
}
}]
},
legend: {
display: false
},
responsive: false,
maintainAspectRatio: true
}
});
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart.Line(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC", ""],
datasets: [{
data: [5, 10.5, 18.2, 33.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
pointLabelFontSize: 4,
borderWidth: 2,
fill: false,
lineTension: .3,
borderColor: "#f37029",
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'bevel',
pointBorderColor: "#f37029",
pointBackgroundColor: "#f37029",
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
spanGaps: false,
}, {
data: [10, 20, 5.2, 35.9, 121.2, 184.9, 179.9, 196.1, 158.3, 166.3, 66.4, 20.6, null],
pointLabelFontSize: 4,
borderWidth: 2,
fill: false,
lineTension: .3,
borderColor: "#f37029",
borderCapStyle: 'round',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'bevel',
pointBorderColor: "#f37029",
pointBackgroundColor: "#f37029",
pointBorderWidth: 1,
pointHoverRadius: 4,
pointHoverBackgroundColor: "rgba(220,220,220,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 4,
pointHitRadius: 10,
spanGaps: false,
}]
},
plugins: [{
afterUpdate: function(chart) {
var dataset = chart.config.data.datasets[0];
var offset = -20;
for (var i = 0; i < dataset._meta[1].data.length; i++) {
var model = dataset._meta[1].data[i]._model;
model.x += offset;
model.controlPointNextX += offset;
model.controlPointPreviousX += offset;
}
var dataset2 = chart.config.data.datasets[1];
var offset2 = 20;
for (var o = 0; o < dataset2._meta[1].data.length; o++) {
var model2 = dataset2._meta[1].data[o]._model;
model2.x += offset2;
model2.controlPointNextX += offset2;
model2.controlPointPreviousX += offset2;
}
}
}],
options: {
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true,
display: false,
borderDash: [6, 2],
tickMarkLength: 5
},
ticks: {
fontSize: 8,
labelOffset: 10,
maxRotation: 0
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
max: 200,
min: 0,
stepSize: 20,
fontSize: 8
}
}]
},
legend: {
display: false
},
responsive: false,
maintainAspectRatio: true
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChartTEC"></canvas>
<canvas id="myChart"></canvas>
I'm trying to draw a line chart with chartjs, but i can't get it working - keep getting 't is undefined' error.
here is my fiddle example: http://jsfiddle.net/6bjy9nxh/344/
can anyone figure out what im doing wrong here?
chartjs: http://www.chartjs.org/docs/#line-chart-example-usage
cdn: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js
html
<canvas id="myChart" width="500" height="350"></canvas>
javascript
var ctx = document.getElementById("myChart");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
});
You are including version 1, you need version 2 for Chart.js
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js
http://jsfiddle.net/x55sgzgf/