So I've created this chart, and I'm trying to move the axis around so the Dark red is on the left, and the Blue and the sub of the bar charts is displayed, but I'm having trouble moving the dark red to the right side of this graf. I did try to use the position: 'right', but nothing changed.
I'm trying to make it look like this:
But I can only get this:
var canvas = document.createElement('canvas');
div = document.getElementById('container');
canvas.id = "myChart";
canvas.style.zIndex = 8;
div.appendChild(canvas);
const labels = [
'8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '1', '2', '3', '4', '5', '6', '7'
];
const data = {
labels: labels,
datasets: [{
label: 'Red',
backgroundColor: 'rgb(255,0,0)',
borderColor: 'rgb(255,0,0)',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Yellow',
backgroundColor: 'rgb(255,255,0)',
borderColor: 'rgb(255,255,0)',
data: [0, 2, 2, 0, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Orange',
backgroundColor: 'rgb(255,159,64)',
borderColor: 'rgb(255,159,64)',
data: [9, 21, 21, 0, 21, 21, 21, 21, 18, 18, 18, 18, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Grey light',
backgroundColor: 'rgb(224,224,224)',
borderColor: 'rgb(224,224,224)',
data: [9, 20, 20, 0, 20, 20, 21, 21, 19, 19, 19, 19, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Blue',
backgroundColor: 'rgb(30,144,255)',
borderColor: 'rgb(30,144,255)',
data: [328, 421, 421, 0, 421, 421, 422, 422, 344, 344, 344, 344, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328],
stack: 'combined_first',
yAxisID: 'GreyDaBlue',
order: 1
},
{
label: 'Dark Red',
backgroundColor: 'rgb(165,42,42)',
borderColor: 'rgb(165,42,42)',
data: [0.45, 1.55, 1.55, 0, 1.55, 1.55, 1.55, 1.55, 1.15, 1.15, 1.15, 1.15, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45],
stack: 'combined_second',
yAxisID: 'DarkR',
order: 2
},
{
label: 'Dark Grey',
backgroundColor: 'rgb(80,80,80)',
borderColor: 'rgb(80,80,80)',
data: [18, 43, 43, 0, 43, 43, 44, 44, 38, 38, 38, 38, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
stack: 'combined_third',
yAxisID: 'GreyDaBlue',
order: 3
}
]
};
const config = {
type: 'line',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'WDC History Chart'
},
zoom: {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
drag: {
enabled: true
},
mode: 'x',
}
}
},
scales: {
y: {
stacked: true
}
}
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="container" class="wdc-canvas-size">
</div>
So how do I move the Dark Red y-axis over to the right side?
I could use the DarkR id and position it right in scales like this
var canvas = document.createElement('canvas');
div = document.getElementById('container');
canvas.id = "myChart";
canvas.style.zIndex = 8;
div.appendChild(canvas);
const labels = [
'8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '1', '2', '3', '4', '5', '6', '7'
];
const data = {
labels: labels,
datasets: [{
label: 'Red',
backgroundColor: 'rgb(255,0,0)',
borderColor: 'rgb(255,0,0)',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Yellow',
backgroundColor: 'rgb(255,255,0)',
borderColor: 'rgb(255,255,0)',
data: [0, 2, 2, 0, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Orange',
backgroundColor: 'rgb(255,159,64)',
borderColor: 'rgb(255,159,64)',
data: [9, 21, 21, 0, 21, 21, 21, 21, 18, 18, 18, 18, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Grey light',
backgroundColor: 'rgb(224,224,224)',
borderColor: 'rgb(224,224,224)',
data: [9, 20, 20, 0, 20, 20, 21, 21, 19, 19, 19, 19, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
stack: 'combined',
type: 'bar',
order: 4
},
{
label: 'Blue',
backgroundColor: 'rgb(30,144,255)',
borderColor: 'rgb(30,144,255)',
data: [328, 421, 421, 0, 421, 421, 422, 422, 344, 344, 344, 344, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328],
stack: 'combined_first',
yAxisID: 'GreyDaBlue',
order: 1
},
{
label: 'Dark Red',
backgroundColor: 'rgb(165,42,42)',
borderColor: 'rgb(165,42,42)',
data: [0.45, 1.55, 1.55, 0, 1.55, 1.55, 1.55, 1.55, 1.15, 1.15, 1.15, 1.15, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45],
stack: 'combined_second',
yAxisID: 'DarkR',
order: 2
},
{
label: 'Dark Grey',
backgroundColor: 'rgb(80,80,80)',
borderColor: 'rgb(80,80,80)',
data: [18, 43, 43, 0, 43, 43, 44, 44, 38, 38, 38, 38, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18],
stack: 'combined_third',
yAxisID: 'GreyDaBlue',
order: 3
}
]
};
const config = {
type: 'line',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'WDC History Chart'
},
zoom: {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
drag: {
enabled: true
},
mode: 'x',
}
}
},
scales: {
y: {
stacked: true
},
DarkR: {
position: 'right', // `axis` is determined by the position as `'y'`
}
}
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<div id="container" class="wdc-canvas-size">
</div>
Related
Which of these structures is generally more performant in JS with the v8 engine?
Example 1:
const obj = {
a: 'hello',
b: 'world',
c: 'etc',
};
function getVal(str) {
return obj[str];
}
getVal('b');
Example 2:
function getVal(str) {
if(str=='a') return 'hello';
if(str=='b') return 'world';
return 'etc';
}
getVal('b');
I would imagine example 2 is faster, but 1 is better code. I ask because I'm looking at chess AI, and can structure the position weights as objects:
const positions_w = {
'p':[
[ 100, 100, 100, 100, 105, 100, 100, 100],
[ 78, 83, 86, 73, 102, 82, 85, 90],
[ 7, 29, 21, 44, 40, 31, 44, 7],
[ -17, 16, -2, 15, 14, 0, 15, -13],
[ -26, 3, 10, 9, 6, 1, 0, -23],
[ -22, 9, 5, -11, -10, -2, 3, -19],
[ -31, 8, -7, -37, -36, -14, 3, -31],
[ 0, 0, 0, 0, 0, 0, 0, 0]
],
'n': // ...
and then get them with positions_w[piece.type][y][x] or structure them in arrays:
const p = [
[ 100, 100, 100, 100, 105, 100, 100, 100],
[ 78, 83, 86, 73, 102, 82, 85, 90],
[ 7, 29, 21, 44, 40, 31, 44, 7],
[ -17, 16, -2, 15, 14, 0, 15, -13],
[ -26, 3, 10, 9, 6, 1, 0, -23],
[ -22, 9, 5, -11, -10, -2, 3, -19],
[ -31, 8, -7, -37, -36, -14, 3, -31],
[ 0, 0, 0, 0, 0, 0, 0, 0]
];
and then get them with if(piece.type=='p')return p[y][x]
If the object is small and was created with all of its keys, the speed of property access should be comparable to a switch statement.
One thing to consider however is that you will be updating your position weights pretty often. For this reason I think one big "3D" Int16Array would make a greater difference overall.
In any case, I would make sure no part of my app is dependant on the concrete data structure so that it is possible to delay this decision until later when you can actually profile your AI speed.
I am migrating from Highcharts to ChartJs (v2.8), and in Highcharts, I can get the drawn ticks, and then modify the point style relational with this tick, as shown below:
but in ChartJs I don't see any way of doing that, I don't be able to get the drawn ticks and I don't see the way of modifying the style of only some points either. It's not possible?
Actual config:
var options = {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
datasets: [
{
data: [611, 605, 594, 581, 573, 578, 585, 587, 588, 595, 601, 605, 608, 610, 612, 611, 612, 613, 616, 618, 621, 623, 625, 627, 628, 631, 636, 638, 643, 650],
fill: false,
borderWidth: 1,
pointRadius: 3,
pointBorderWidth: 1,
pointBackgroundColor: "#adadad",
pointHoverRadius: 6,
pointHoverBorderColor: "#adadad",
pointHoverBackgroundColor: `${"#adadad"}30`,
pointHoverBorderWidth: 1,
},
]
},
options: {
responsive: true,
tooltips: {
mode: 'interpolate',
intersect: false,
},
scales: {
xAxes: [{
gridLines: {
display: false,
},
distribution: 'series',
time: {
displayFormats: {
month: '%e. %b',
},
},
ticks: {
maxRotation: 0,
autoSkip: true,
autoSkipPadding: 10,
},
}],
yAxes: [{
gridLines: {
drawBorder: false,
},
ticks: {
padding: 15,
},
}],
},
colors: [{
borderColor: "#adadad",
}],
showLegend: false,
}
}
Example
I am trying to manually set the length of a category axis. In detail I want the length of the x axis equal to the length of the y axis. So far I tried diverse layout settings from plotly manual without results.
var layout = {
width: 400,
height: 300,
plot_bgcolor: '#98ff6d',
};
var data = [{
z: [
[1, 20, 10, 12, 1, 1, 20, 10, 12, 1],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 20, 12, 0],
[1, 20, 10, 12, 1, 13, 20, 0, 12, 21],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 10, 1, 12],
[1, 20, 10, 12, 1, 1, 20, 10, 12, 14],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 13, 4, 12, 16, 1, 21, 20, 0, 18],
[1, 20, 0, 12, 1, 21, 65, 10, 12, 1],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 10, 15, 0],
[1, 20, 10, 12, 1, 1, 30, 10, 12, 14],
[24, 13, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 29, 1, 19, 31],
[1, 20, 10, 12, 1, 31, 0, 10, 12, 19],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 10, 11, 21],
[1, 0, 10, 12, 1, 1, 10, 10, 12, 21],
[24, 1, 0, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 20, 1, 19, 36],
[1, 20, 10, 12, 1, 21, 21, 10, 12, 31],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 12, 4, 12, 16, 1, 21, 43, 12, 18],
[1, 20, 10, 12, 1, 1, 39, 10, 12, 13],
[24, 1, 12, 19, 0, 1, 20, 12, 2, 1],
[8, 1, 4, 12, 16, 1, 20, 10, 1, 11],
[1, 20, 10, 12, 1, 19, 38, 10, 12, 16],
[24, 12, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 1, 4, 12, 16, 1, 29, 4, 12, 3],
[1, 20, 0, 12, 1, 1, 23, 10, 12, 11],
[24, 1, 12, 19, 0, 1, 20, 10, 12, 1],
[8, 19, 4, 12, 16, 1, 20, 10, 12, 19],
[1, 20, 10, 12, 1, 1, 24, 10, 12, 0],
[24, 1, 12, 19, 023, 1, 22, 10, 12, 1],
[8, 1, 41, 12, 16, 1, 20, 10, 12, 11]
],
x: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10'],
y: ['Messung 1', 'Messung 2', 'Messung 3',
'Messung 4', 'Messung 5', 'Messung 6',
'Messung 7', 'Messung 8', 'Messung 9',
'Messung 10', 'Messung 11', 'Messung 12',
'Messung 13', 'Messung 14', 'Messung 15',
'Messung 16', 'Messung 17', 'Messung 18',
'Messung 19', 'Messung 20', 'Messung 21',
'Messung 22', 'Messung 23', 'Messung 24',
'Messung 25', 'Messung 26', 'Messung 27',
'Messung 28', 'Messung 29', 'Messung 30',
'Messung 31', 'Messung 32', 'Messung 33',
'Messung 34', 'Messung 35', 'Messung 36'
],
type: 'surface'
}];
Plotly.newPlot('plot', data, layout, {
displayModeBar: true,
displaylogo: false
});
#plot {
height: 100vh, width:100vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified plotly.js JavaScript -->
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot"></div>
Give your layout Object a scene, and set your desired range on its axis, yaxis, and (if you like) zaxis properties. E.g.
var MIN_VAL = -100, MAX_VAL = 100;
var layout = {
scene:{
axis: {
nticks: 10,
range: [ MIN_VAL, MAX_VAL ]
},
yaxis: {
nticks: 10,
range: [ MIN_VAL, MAX_VAL ]
},
zaxis: {
nticks: 7,
range: [ MIN_VAL, MAX_VAL ]
},
aspectmode: "manual",
aspectratio: { x: 1, y: 1, z: 0.7 },
bgcolor : '#98ff6d'
},
autosize: false,
width: 400,
height: 300,
margin: { l: 0, r: 0, b: 50, t: 50, pad: 4 }
};
Plotly.newPlot('plot', data, layout);
Plotly has a working example (that shows the use of even more layout options) on CodePen.
I'm trying to include 2 charts in a page. One is a line chart, the other is a scatter. I've followed the guide on the Google Charts' API for implementing multiple charts on a single page, using a single call-back function however at any given time only one of the charts will appear. The really strange part is that it's the left line chart that appears on Safari and the right Scatter chart that appears on Chrome.
The code for the chart creation in the head section is as follows.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataLine = google.visualization.arrayToDataTable([
['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
['15:00', 728, 1065, 112, 73 , 12, 134],
['16:00', 943, 1056, 122, 112 , 9, 116],
['17:00', 1280, 1069, 156, 99 , 26, 196],
['18:00', 1276, 1277, 154, 134 , 9, 204],
['19:00', 1235, 984, 84, 109 , 10, 134],
['20:00', 1133, 1028, 83, 74 , 20, 73],
['21:00', 938, 1018, 191, 49 , 33, 66],
['22:00', 1038, 952, 163, 72 , 27, 79],
['23:00', 851, 807, 156, 57 , 11, 79],
['00:00', 390, 455, 89, 24 , 9, 41],
['01:00', 195, 270, 13, 13 , 5, 13],
['02:00', 92, 140, 18, 2 , 0, 7],
['03:00', 86, 73, 7, 2 , 1, 2],
['04:00', 136, 49, 8, 3 , 1, 8],
['05:00', 99, 86, 10, 3 , 0, 5],
['06:00', 230, 200, 15, 8 , 5, 12],
['07:00', 531, 461, 49, 39 , 4, 40],
['08:00', 605, 683, 152, 67 , 13, 96],
['09:00', 528, 800, 111, 78 , 17, 53],
['10:00', 716, 885, 75, 68 , 14, 76],
['11:00', 1102, 768, 66, 50 , 15, 46],
['12:00', 1015, 695, 41, 47 , 18, 49],
['13:00', 856, 624, 52, 95 , 18, 73],
['14:00', 779, 524, 32, 30 , 21, 70]
]);
var optionsLine = {
title: '',
curveType: 'function',
legend: { position: 'bottom' },
colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
theme: 'material',
vAxis: {
viewWindow: {
min: 0
}
},
};
var dataScatter = google.visualization.arrayToDataTable([
['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
['15:00', 0.158333, 0.186111, 0.191667, 0.0708333 , 0.1625, 0.202827],
['16:00', 0.0194444, 0.155417, 0.199306, 0.183333 , 0.5, 0.15],
['17:00', 0.147917, 0.161146, 0.227083, 0.154861 , 0.120833, 0.178393],
['18:00', -0.003125, 0.151515, 0.123214, 0.234524 , 0.388333, 0.228571],
['19:00', 0.125, 0.179762, 0.116667, 0.207292 , -0.075, 0.207143],
['20:00', 0.125, 0.183333, 0.171591, 0.179167 , 0.45, 0.114881],
['21:00', 0.110795, 0.2, 0.200379, 0.15625 , 0.18925, 0.198611],
['22:00', 0.105787, 0.175, 0.233333, 0.179167 , 0.0171131, 0.1625],
['23:00', 0.0146465, 0.183333, 0.159091, 0 , 0.0680556, 0.202313],
['00:00', 0.0675, 0.176736, 0.113021, 0.166667 , 0.350758, 0.187946],
['01:00', 0.0162698, 0.158333, 0.251711, -0.227778 , -0.3625, 0.0964286],
['02:00', 0.145, 0.215625, 0.24375, -0.0729167 , 0, 0.447619],
['03:00', 0.145509, 0.22128, 0.159091, 0 , -0.2, 0],
['04:00', 0.104167, 0.158333, 0.16875, 0.35 , 0, 0.111111],
['05:00', 0.0127946, 0.05, -0.426042, 0.325 , 0, 0.0638889],
['06:00', 0.146875, 0.0708333, -0.221429, 0.05 , 0, 0.273214],
['07:00', 0.1125, 0.184722, -0.0253472, 0.258333 , -0.35, 0.161354],
['08:00', 0.133333, 0.190972, 0.141667, 0.244048 , 0.358929, 0.186458],
['09:00', 0.128355, 0.188988, 0.13, 0.181061 , 0.0425, 0.257552],
['10:00', 0.1, 0.196875, 0.147112, -0.0464286 , -0.161458, 0.26875],
['11:00', 0.136364, 0.174826, 0.285714, 0.290476 , 0.31875, 0.275],
['12:00', -0.00357143, 0.172222, 0.199657, 0.1625 , 0.215, 0.159375],
['13:00', -0.1, 0.2, 0.195312, 0.0791667 , -0.246296, 0.183333],
['14:00', -0.00357143, 0.180303, 0.11125, 0.35 , 0.0081229, 0.19881]
]);
var optionsScatter = {
title: '',
vAxis: { minValue: -1.0, maxValue: 1.0},
colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
theme: 'material',
legend: {position: 'bottom'}
};
var chartLine = new google.visualization.LineChart(document.getElementById('chart_1'));
chartLine.draw(dataLine, optionsLine);
var chartScatter = new google.visualization.ScatterChart(document.getElementById('chart_2'));
chartScatter.draw(dataScatter, optionsScatter);
}
</script>
It would appear the chart.draw function can only be called one at a time but since it's asynchronous it returns instantly and tried to call the second one straight away. The answer is to use the google.visualization.events.addOneTimeListener() to call the second chart.draw after the first.
Finished Code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages:["corechart","scatter"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataLine = google.visualization.arrayToDataTable([
['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
['21:00', 938, 1018, 191, 49 , 33, 66],
['22:00', 1038, 952, 163, 72 , 27, 79],
['23:00', 851, 807, 156, 57 , 11, 79],
['00:00', 390, 455, 89, 24 , 9, 41],
['01:00', 195, 270, 13, 13 , 5, 13],
['02:00', 92, 140, 18, 2 , 0, 7],
['03:00', 86, 73, 7, 2 , 1, 2],
['04:00', 136, 49, 8, 3 , 1, 8],
['05:00', 99, 86, 10, 3 , 0, 5],
['06:00', 230, 200, 15, 8 , 5, 12],
['07:00', 531, 461, 49, 39 , 4, 40],
['08:00', 605, 683, 152, 67 , 13, 96],
['09:00', 528, 800, 111, 78 , 17, 53],
['10:00', 716, 885, 75, 68 , 14, 76],
['11:00', 1102, 768, 66, 50 , 15, 46],
['12:00', 1015, 695, 41, 47 , 18, 49],
['13:00', 856, 624, 52, 95 , 18, 73],
['14:00', 779, 524, 32, 30 , 21, 70],
['15:00', 587, 533, 30, 161 , 19, 46],
['16:00', 580, 566, 59, 78 , 13, 56],
['17:00', 1041, 658, 23, 67 , 13, 39],
['18:00', 1835, 807, 22, 72 , 7, 65],
['19:00', 1603, 630, 35, 116 , 9, 126],
['20:00', 1898, 614, 26, 135 , 11, 110]
]);
var optionsLine = {
title: '',
curveType: 'function',
legend: { position: 'bottom' },
colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
theme: 'material',
vAxis: {
viewWindow: {
min: 0
}
},
};
var dataScatter = google.visualization.arrayToDataTable([
['Hour', 'Example', 'Example1', 'Example2', 'Example3', 'Example4', 'Example5'],
['21:00', 0.110795, 0.2, 0.200379, 0.15625 , 0.18925, 0.198611],
['22:00', 0.105787, 0.175, 0.233333, 0.179167 , 0.0171131, 0.1625],
['23:00', 0.0146465, 0.183333, 0.159091, 0 , 0.0680556, 0.202313],
['00:00', 0.0675, 0.176736, 0.113021, 0.166667 , 0.350758, 0.187946],
['01:00', 0.0162698, 0.158333, 0.251711, -0.227778 , -0.3625, 0.0964286],
['02:00', 0.145, 0.215625, 0.24375, -0.0729167 , 0, 0.447619],
['03:00', 0.145509, 0.22128, 0.159091, 0 , -0.2, 0],
['04:00', 0.104167, 0.158333, 0.16875, 0.35 , 0, 0.111111],
['05:00', 0.0127946, 0.05, -0.426042, 0.325 , 0, 0.0638889],
['06:00', 0.146875, 0.0708333, -0.221429, 0.05 , 0, 0.273214],
['07:00', 0.1125, 0.184722, -0.0253472, 0.258333 , -0.35, 0.161354],
['08:00', 0.133333, 0.190972, 0.141667, 0.244048 , 0.358929, 0.186458],
['09:00', 0.128355, 0.188988, 0.13, 0.181061 , 0.0425, 0.257552],
['10:00', 0.1, 0.196875, 0.147112, -0.0464286 , -0.161458, 0.26875],
['11:00', 0.136364, 0.174826, 0.285714, 0.290476 , 0.31875, 0.275],
['12:00', -0.00357143, 0.172222, 0.199657, 0.1625 , 0.215, 0.159375],
['13:00', -0.1, 0.2, 0.195312, 0.0791667 , -0.246296, 0.183333],
['14:00', -0.00357143, 0.180303, 0.11125, 0.35 , 0.0081229, 0.19881],
['15:00', 0.1375, 0.180556, 0.0840909, 0.183333 , -0.01875, 0.0875],
['16:00', 0.131548, 0.19375, -0.25, 0.175 , 0.189286, 0.0375],
['17:00', 0.118182, 0.146429, 0.0878472, 0.325 , 0.199107, 0.205],
['18:00', 0.1, 0.165057, 0.338542, 0.0277778 , -0.1125, 0.275],
['19:00', -0.00793651, 0.0125654, 0.119444, 0.266667 , 0.0309722, 0.3],
['20:00', -0.0166667, 0.196044, 0.239583, 0.373295 , 0.00625, 0.4375]
]);
var optionsScatter = {
title: '',
vAxis: { minValue: -1.0, maxValue: 1.0},
colors: ['#00539f', '#e4003b','#faa01a','#ffeb3b','#19283e','#00539f'],
theme: 'material',
legend: {position: 'bottom'}
};
var chartScatter = new google.visualization.ScatterChart(document.getElementById('chart_2'));
google.visualization.events.addOneTimeListener(chartScatter, 'ready', function(){
//render chart2 once chart1 is rendered
var chartLine = new google.visualization.LineChart(document.getElementById('chart_1'));
chartLine.draw(dataLine, optionsLine);
});
chartScatter.draw(dataScatter, optionsScatter);
}
</script>
I'm using a column chart with a slider that redraws the chart after slide operation is invoked. I'm storing each data array in a javascript object and the chart renders according to the slider option. After assigning the initial values for the first slider option, the chart renders correctly but when I slide back to the first position, the chart won't render. And the weird part is when I assign the initial values to a separate variable and the data option is assigned with this variable, the chart renders correctly at every position.
Here's the code:
var data = {
"jan": [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0],
"feb": [0, 5, 25, 35, 30, 10, 0, 10, 25, 30, 25],
"mar": [0, 30, 18, 4, 18, 30, 0, 20, 30, 25, 15],
"apr": [0, 20, 30, 25, 15, 10, 0, 10, 15, 25, 30],
"may": [0, 10, 15, 25, 30, 20, 0, 35, 123, 978, 43],
"jun": [54, 5, 546, 77, 34, 3, 2, 567, 567, 7, 57],
"jul": [56, 324, 768, 578, 124, 154, 90, 150, 125, 258, 312],
"aug": [67, 76, 4, 76, 23, 2, 24, 10, 15, 546, 30],
"sep": [6, 5, 35, 123, 978, 4, 32, 10, 15, 546, 30],
"oct": [97, 56, 7, 567, 567, 7, 57, 10, 15, 25, 30],
"nov": [56, 4, 65, 25, 6, 565, 56, 10, 15, 546, 30],
"dec": [0, 10, 15, 546, 30, 33, 0, 10, 15, 546, 30]
};
var someData = [0, 10, 25, 30, 25, 10, 0,30, 25, 10, 0];
var chart = new Highcharts.chart({
chart: {
renderTo: 'container',
type: 'column',
marginTop: 50,
marginLeft: 100,
marginBottom: 50
},
title: false,
exporting: {enabled: false},
xAxis: {
crosshair: true,
tickColor: '#7F7F7F',
lineColor: '#7F7F7F',
tickWidth: 0,
labels: {
step: 5
},
title: {
text: 'x-axis',
align: "left",
x: -10,
rotation: 0,
style: {
"font-size" : "15px"
}
}
},
yAxis: {
min: 0,
title: {
text: 'y-axis',
align: 'high',
rotation: 0,
y: -10,
offset: 0,
style: {
"font-size" : "15px"
}
},
gridLineColor: 'transparent',
lineColor: '#7F7F7F',
lineWidth: 1,
tickWidth: 1,
tickColor: '#7F7F7F',
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
step: 2,
formatter: function(){
if(this.value > 999)
return Math.round(this.value/1000) + 'k';
return this.value;
}
}
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series: {
colorByPoint: true
}
},
series: [{
showInLegend: false,
data: someData
}],
credits: false
});
$('#slider_bar').on("slide", function () {
chart.series[0].setData(data[document.getElementById('value').innerHTML]);
});
The initial position of the slider is at jan and the chart renders correctly when I slide back to jan. I'd like to know why the chart won't render when I assign series.data as:
data: data.jan
Any suggestions?
Highchart series.data expects a key value pair, or an array of arrays like
[[x1,y1],[x2,y2]]
or
{
y: [x1,x2]
}
now when you do data = data.jan Highchart is not able to find the Y value because data.jan is a simple array
Found the solution:
instead of writing
data: data.jan
write
data: data.jan.slice()
The slice function does not directly returns the reference of the array, instead it returns a copy of the array. I still wonder why we need to use the slice function in the first place, for this particular situation but it works.