Related
please help, thank you.
i am now writing datapart of chartjs
var configcount = {type: "line",data: {
labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
datasets: [{label: "Balance1",
data: [10, 20, 30, 40, 50, 60, 70],
fill: false,pointBorderWidth: ...
,},},],},},};
want to change multiple line that Balance1: 10, 20, 30, 40, 50, 60, 70 & Balance2: 15, 30, 15, 30, 15, 30, 15
You need to define two distinct datasets as follows.
data: {
labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
datasets: [{
label: "Balance1",
data: [10, 20, 30, 40, 50, 60, 70],
...
}, {
label: "Balance2",
data: [15, 30, 15, 30, 15, 30, 15],
fill: false,
...
}]
}
Please take a loo at below code and see how it works.
new Chart(document.getElementById("chart"), {
type: 'line',
data: {
labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
datasets: [{
label: "Balance1",
data: [10, 20, 30, 40, 50, 60, 70],
fill: false,
backgroundColor: "rgba(255, 99, 132, 0.2)",
borderColor: "rgb(255, 99, 132)",
pointBorderWidth: 10
}, {
label: "Balance2",
data: [15, 30, 15, 30, 15, 30, 15],
fill: false,
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgb(54, 162, 235)",
pointBorderWidth: 4,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>
I am working on creating a Line graph that plots points at different times during one day for different days and in order to do that, I need to use the type: time on the xAxes. I have the moment.js downloaded, but the type:time is giving me an error. Without the type:time, the X axis label is too long and makes the graph look bad. Any ideas what I would need to do to fix this?
I have tried to put the data points this way:
data: [ {x: newDate(2019, 06, 24, 08, 00), y: 24}]
but it still didn't work with the type:time
<canvas id="timechart" width="800" height="400" role="img"></canvas>
<script>
var ctx = document.getElementById('timechart');
var timeFormat = 'MM/DD/YY HH:mm';
function newDate(days) {
return moment().add(days).toDate();
}
function newDateString(days) {
return moment().add(days).format();
}
var timechart = new Chart(ctx, {
type: "line",
data: {
labels: [newDate(0), newDate(1), newDate(2), newDate(3),
newDate(4), newDate(5), newDate(6), newDate(7), newDate(8), newDate(9),
newDate(10), newDate(11),
newDate(12), newDate(13), newDate(14), newDate(15),
newDate(16), newDate(17)],
datasets: [
{
data: [12, 21, 32, 25, 16, 14, 7, 25, 18, 20, 22, 15,
17, 11, 19, 28, 30, 10],
label: 'D Speed',
fill: false,
backgroundColor: 'rgba(102, 147, 188, 1)',
borderColor: 'rgba(102, 147, 188, 1)',
radius: 4,
hoverRadius: 5,
}, {
data: [8, 16, 24, 30, 20, 10, 12, 21, 32, 15, 17, 11,
22, 18, 29, 17, 8],
label: 'U Speed',
fill: false,
backgroundColor: 'rgba(255, 147, 44, 1)',
borderColor: 'rgba(255, 147, 44, 1)',
radius: 4,
hoverRadius: 5,
}
],
},
options: {
title: {
display: true,
},
scales: {
xAxes: [{
display: true,
type: 'time',
}],
yAxis: [{
display: true,
}]
},
}
});
</script>
I expect the x axis labels to show just the MM/DD/YY HH:MM but it is actually not showing the chart at all.
The code you shared worked for me. Make sure that you've included Moment and the non-bundled version of Chart.js in your project. E.g.:
<script src="https://cdn.jsdelivr.net/npm/moment#2.24.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
Also, check your browser's developer console to see if there are any JavaScript errors that can help give more clues as to the problem. You can access in Chrome by hitting F12.
I can't get my multi-line chart to animate on start up -
While I'm fetching data points for my multi line graph from the DB, I've added a sample of what the points would be in my code below:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time');
data.addColumn('number', 'Count of Users');
data.addColumn('number', 'Count of Items');
data.addColumn('number', 'Count of Locations');
data.addRows([
[[8,07,06],1,181,181],
[[8,08,52],1,73,73],
[[8,09,43],1,204,204],
[[8,10,06],1,209,209],
[[8,10,27],1,334,334],
[[8,10,47],1,345,345],
[[8,12,24],1,852,852],
[[8,13,52],1,317,317],
[[8,43,01],1,538,538],
[[8,51,53],1,50,50],
[[8,55,01],1,50,50],
[[8,55,30],1,99,99],
[[8,56,27],1,51,51],
[[8,57,11],1,50,50],
[[8,57,58],1,50,50],
[[8,58,32],1,50,50],
[[8,59,42],1,16,16],
[[9,08,54],1,16,16],
[[9,09,41],1,2,2],
[[9,10,07],1,9,9],
[[9,10,53],1,35,35],
[[9,11,31],1,4,4],
[[9,11,45],1,3,3]
]);
var options = {
title: 'Updated every 3 Hours',
chart: {
animation: {
duration: 2000,
easing: 'linear',
startup: true
},
},
width: 1000,
height: 500
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
As of now a static multi line graph is rendered:
enter image description here
There are multiple issues with your code(your console should have logged them)
08 and 09 are not valid Number-values(should be 8 and 9)
you load the wrong package(you must load corechart)
animation is not a property of chart
fixed chart:
google.load('visualization', '1.1', {
packages: ['corechart']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time');
data.addColumn('number', 'Count of Users');
data.addColumn('number', 'Count of Items');
data.addColumn('number', 'Count of Locations');
data.addRows([
[
[8, 7, 06], 1, 181, 181
],
[
[8, 8, 52], 1, 73, 73
],
[
[8, 9, 43], 1, 204, 204
],
[
[8, 10, 06], 1, 209, 209
],
[
[8, 10, 27], 1, 334, 334
],
[
[8, 10, 47], 1, 345, 345
],
[
[8, 12, 24], 1, 852, 852
],
[
[8, 13, 52], 1, 317, 317
],
[
[8, 43, 01], 1, 538, 538
],
[
[8, 51, 53], 1, 50, 50
],
[
[8, 55, 01], 1, 50, 50
],
[
[8, 55, 30], 1, 99, 99
],
[
[8, 56, 27], 1, 51, 51
],
[
[8, 57, 11], 1, 50, 50
],
[
[8, 57, 58], 1, 50, 50
],
[
[8, 58, 32], 1, 50, 50
],
[
[8, 59, 42], 1, 16, 16
],
[
[9, 8, 54], 1, 16, 16
],
[
[9, 9, 41], 1, 2, 2
],
[
[9, 10, 07], 1, 9, 9
],
[
[9, 10, 53], 1, 35, 35
],
[
[9, 11, 31], 1, 4, 4
],
[
[9, 11, 45], 1, 3, 3
]
]);
var options = {
title: 'Updated every 3 Hours',
animation: {
duration: 2000,
easing: 'linear',
startup: true
},
//width: 1000,
//height: 500
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
I have this geochart: https://jsfiddle.net/y2dkrpg1/
Is it possible to add some adition information (text) about each region (for example by clicking on the region)?
Thank you!
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State', 'NS'],
['Blagoevgrad', 17],
['Burgas', 15],
['Varna', 27],
['Veliko Tarnovo', 24],
['Vidin', 30],
['Vratsa', 35],
['Gabrovo', 30],
['Dobrich', 37],
['Kardzhali', 23],
['Kyustendil', 17],
['Lovech', 20],
['Montana', 49],
['Pazardjik', 31],
['Pernik', 26],
['Pleven', 24],
['Plovdiv', 28],
['Razgrad', 25],
['Ruse', 28],
['Silistra', 49],
['Sliven', 17],
['Smolyan', 25],
['Sofia', 28],
['Stara Zagora', 20],
['Targovishte', 30],
['Haskovo', 40],
['Shumen', 40],
['Yambol', 30],
['Pazardzhik', 31],
['Sofia-grad', 12],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 0,
suffix: '%'
});
formatter.format(data, 1);
var options = {
region: 'BG',
displayMode: 'regions',
resolution: 'provinces',
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
Write something in stead of 'Tadam' and the values.
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['State', 'NEETs','TADAM'],
['Blagoevgrad', 17, 100],
['Burgas', 15, 100],
['Varna', 27, 6],
['Veliko Tarnovo', 24, 34],
['Vidin', 30, 324],
['Vratsa', 35, 234],
['Gabrovo', 30, 32423],
['Dobrich', 37, 5],
['Kardzhali', 23, 5],
['Kyustendil', 17, 5],
['Lovech', 20, 345],
['Montana', 49, 43534],
['Pazardjik', 31, 34534],
['Pernik', 26, 34534],
['Pleven', 24, 3443],
['Plovdiv', 28, 34],
['Razgrad', 25, 100],
['Ruse', 28, 10],
['Silistra', 49, 1],
['Sliven', 17, 2],
['Smolyan', 25, 3],
['Sofia', 28, 4],
['Stara Zagora', 20, 5],
['Targovishte', 30, 6],
['Haskovo', 40, 7],
['Shumen', 40, 8],
['Yambol', 30, 9],
['Pazardzhik', 31, 10],
['Sofia-grad', 12, 11],
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 0,
suffix: '%'
});
formatter.format(data, 1);
var options = {
region: 'BG',
displayMode: 'regions',
resolution: 'provinces',
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
https://jsfiddle.net/y2dkrpg1/
I am currently testing google charts and having difficulty in specifying my own custom tooltips.
my data is declared as below
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([0, 0, 0, 'hello'], [1, 10, 5, 'hello'],
[2, 23, 15, 'hello'],[3, 17, 9, 'hello'], [4, 18, 10, 'hello'],
[5, 9, 5, 'hello'],
see this jsFiddle http://jsfiddle.net/SecretSquirrel/rbwyhx1q/
It appears the custom tooltip is only affecting the first data column?
I thought it was pretty limited to only allow 1 tooltip per row, but if this is only 1 tooltip for the first column this is really quite useless.
Well you have to add another tooltip column for your second graft.
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([
[0, 0,'custom', 0, 'hello'], [1, 10,'custom', 5, 'hello'], [2, 23,'custom', 15, 'hello'],
[3, 17,'custom', 9, 'hello'], [4, 18,'custom', 10, 'hello'], [5, 9,'custom', 5, 'hello'],
[6, 11,'custom', 3, 'hello'], [7, 27,'custom', 19, 'hello'], [8, 33,'custom', 25, 'hello'],
[9, 40,'custom', 32, 'hello'], [10, 32,'custom', 24, 'hello'], [11, 35,'custom', 27, 'hello'],
[12, 30,'custom', 22, 'hello'], [13, 40,'custom', 32, 'hello'], [14, 42,'custom', 34, 'hello'],
[15, 47,'custom', 39,'hello'], [16, 44,'custom', 36,'hello'], [17, 48,'custom', 40, 'hello'],
[18, 52,'custom', 44,'hello'], [19, 54,'custom', 46,'hello'], [20, 42,'custom', 34, 'hello'],
[21, 55,'custom', 47,'hello'], [22, 56,'custom', 48,'hello'], [23, 57,'custom', 49,'hello']
]);
var options = {
width: 1000,
height: 563,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('ex2'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="ex2"></div>