Related
I'm trying to add values to nodes of plotly graph but there is an issue.
Code:
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
.graph-container {
display: flex;
justify-content: center;
align-items: center;
}
.main-panel {
width: 70%;
float: left;
}
.side-panel {
width: 30%;
background-color: lightgray;
min-height: 300px;
overflow: auto;
float: right;
}
</style>
</head>
<body>
<div class="graph-container">
<div id="myDiv" class="main-panel"></div>
<div id="lineGraph" class="side-panel"></div>
</div>
<script>
var nodes = [
{ x: 0, y: 0, z: 0, value: [1, 2, 3] },
{ x: 1, y: 1, z: 1, value: [4, 5, 6] },
{ x: 2, y: 0, z: 2, value: [7, 8, 9] },
{ x: 3, y: 1, z: 3, value: [10, 11, 12] },
{ x: 4, y: 0, z: 4, value: [13, 14, 15] }
];
var edges = [
{ source: 0, target: 1 },
{ source: 1, target: 2 },
{ source: 2, target: 3 },
{ source: 3, target: 4 }
];
var x = [];
var y = [];
var z = [];
for (var i = 0; i < nodes.length; i++) {
x.push(nodes[i].x);
y.push(nodes[i].y);
z.push(nodes[i].z);
}
var xS = [];
var yS = [];
var zS = [];
var xT = [];
var yT = [];
var zT = [];
for (var i = 0; i < edges.length; i++) {
xS.push(nodes[edges[i].source].x);
yS.push(nodes[edges[i].source].y);
zS.push(nodes[edges[i].source].z);
xT.push(nodes[edges[i].target].x);
yT.push(nodes[edges[i].target].y);
zT.push(nodes[edges[i].target].z);
}
var traceNodes = {
x: x, y: y, z: z,
mode: 'markers',
marker: { size: 12, color: 'red' },
type: 'scatter3d',
text: [0, 1, 2, 3, 4],
hoverinfo: 'text',
hoverlabel: {
bgcolor: 'white'
},
customdata: nodes.map(function(node) {
if (node.value !== undefined)
return node.value;
}),
type: 'scatter3d'
};
var layout = {
margin: { l: 0, r: 0, b: 0, t: 0 }
};
Plotly.newPlot('myDiv', [traceNodes], layout, { displayModeBar: false });
document.getElementById("myDiv").on("plotly_click", function(data){
var nodeIndex = data.points[0].pointIndex;
var values = nodes[nodeIndex].value;
console.log(values);
Plotly.newPlot('lineGraph', [{ x: [0, 1, 2], y: values, type: 'scatter3d'}], {
margin: { t: 0 }
});
});
</script>
</body>
</html>
var values = nodes[nodeIndex].value; is not able to access the node values.
Suggestions on how to fix this will be really helpful.
EDIT0:
<html>
<head>
<script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
<style>
.graph-container {
display: flex;
justify-content: center;
align-items: center;
}
.main-panel {
width: 70%;
float: left;
}
.side-panel {
width: 30%;
background-color: lightgray;
min-height: 300px;
overflow: auto;
float: right;
}
</style>
</head>
<body>
<div class="graph-container">
<div id="myDiv" class="main-panel"></div>
<div id="lineGraph" class="side-panel"></div>
</div>
<script>
var nodes = [
{ x: 0, y: 0, z: 0, value: [1, 2, 3] },
{ x: 1, y: 1, z: 1, value: [4, 5, 6] },
{ x: 2, y: 0, z: 2, value: [7, 8, 9] },
{ x: 3, y: 1, z: 3, value: [10, 11, 12] },
{ x: 4, y: 0, z: 4, value: [13, 14, 15] }
];
var edges = [
{ source: 0, target: 1 },
{ source: 1, target: 2 },
{ source: 2, target: 3 },
{ source: 3, target: 4 }
];
var x = [];
var y = [];
var z = [];
for (var i = 0; i < nodes.length; i++) {
x.push(nodes[i].x);
y.push(nodes[i].y);
z.push(nodes[i].z);
}
var xS = [];
var yS = [];
var zS = [];
var xT = [];
var yT = [];
var zT = [];
for (var i = 0; i < edges.length; i++) {
xS.push(nodes[edges[i].source].x);
yS.push(nodes[edges[i].source].y);
zS.push(nodes[edges[i].source].z);
xT.push(nodes[edges[i].target].x);
yT.push(nodes[edges[i].target].y);
zT.push(nodes[edges[i].target].z);
}
var traceNodes = {
x: x, y: y, z: z,
mode: 'markers',
marker: { size: 12, color: 'red' },
type: 'scatter3d',
text: [0, 1, 2, 3, 4],
hoverinfo: 'text',
hoverlabel: {
bgcolor: 'white'
},
customdata: nodes.map(function(node) {
if (node.value !== undefined)
return node.value;
}),
type: 'scatter3d'
};
var layout = {
margin: { l: 0, r: 0, b: 0, t: 0 }
};
Plotly.newPlot('myDiv', [traceNodes], layout, { displayModeBar: false });
const ymax = Math.max(...nodes.map(n => n.value).flat());
document.getElementById("myDiv").on("plotly_click", function(data){
var nodeIndex = data.points[0].pointNumber;
var values = nodes[nodeIndex].value;
console.log(values);
Plotly.newPlot('lineGraph', [{ x: [0, 1, 2], y: values, type: 'scatter3d'}], {
margin: { t: 0 },
yaxis: {autorange: false, range: [0, ymax + 1]}
});
});
</script>
</body>
</html>
I made the corrections suggested in the answer below but the I am still not able to see the line graph when nodes in the main panel are clicked.
Use pointNumber instead of pointIndex. You also need to fix the type of the second plot, for which I also suggest to set a fixed axis range (otherwise the axis will reset for each selected point) :
// max y value for the line plot
const ymax = Math.max(...nodes.map(n => n.value).flat());
document.getElementById('myDiv').on('plotly_click', function(data){
var nodeIndex = data.points[0].pointNumber;
var values = nodes[nodeIndex].value;
Plotly.newPlot('lineGraph', [{
type: 'scatter',
mode: 'lines',
x: [0, 1, 2],
y: values
}], {
margin: { t: 0 },
yaxis: {autorange: false, range: [0, ymax + 1]}
});
});
For reference, here is the event data structure for 3d plots :
{
points: [{
curveNumber: 2, // index in data of the trace associated with the selected point
pointNumber: 2, // index of the selected point
x: 5, // x value
y: 600, // y value
z: 12, // z value
data: {/* */}, // ref to the trace as sent to Plotly.newPlot associated with the selected point
fullData: {/* */}, // ref to the trace including all of the default attributes
xaxis: {/* */}, // ref to x-axis object (i.e layout.xaxis) associated with the selected point
yaxis: {/* */} // ref to y-axis object " "
zaxis: {/* */} // ref to z-axis object " "
}, {
/* similarly for other selected points */
}]
}
One last thing, don't use plotly-latest.js or its minified version anymore. While still referenced here and there in the documentation, they are stuck at version 1.58.5.
Please note that as of v2 the "plotly-latest" outputs will no longer be updated on the CDN, and will stay at the last v1 patch v1.58.5. Therefore, to use the CDN with plotly.js v2 and higher, you must specify an exact plotly.js version.
Here is the complete code :
<html>
<head>
<script src="https://cdn.plot.ly/plotly-2.18.1.min.js"></script>
<style>
.graph-container {
display: flex;
justify-content: center;
align-items: center;
}
.main-panel {
width: 70%;
float: left;
}
.side-panel {
width: 30%;
background-color: lightgray;
min-height: 300px;
overflow: auto;
float: right;
}
</style>
</head>
<body>
<div class="graph-container">
<div id="myDiv" class="main-panel"></div>
<div id="lineGraph" class="side-panel"></div>
</div>
<script>
var nodes = [
{ x: 0, y: 0, z: 0, value: [1, 2, 3] },
{ x: 1, y: 1, z: 1, value: [4, 5, 6] },
{ x: 2, y: 0, z: 2, value: [7, 8, 9] },
{ x: 3, y: 1, z: 3, value: [10, 11, 12] },
{ x: 4, y: 0, z: 4, value: [13, 14, 15] }
];
var edges = [
{ source: 0, target: 1 },
{ source: 1, target: 2 },
{ source: 2, target: 3 },
{ source: 3, target: 4 }
];
var x = [];
var y = [];
var z = [];
for (var i = 0; i < nodes.length; i++) {
x.push(nodes[i].x);
y.push(nodes[i].y);
z.push(nodes[i].z);
}
var xS = [];
var yS = [];
var zS = [];
var xT = [];
var yT = [];
var zT = [];
for (var i = 0; i < edges.length; i++) {
xS.push(nodes[edges[i].source].x);
yS.push(nodes[edges[i].source].y);
zS.push(nodes[edges[i].source].z);
xT.push(nodes[edges[i].target].x);
yT.push(nodes[edges[i].target].y);
zT.push(nodes[edges[i].target].z);
}
var traceNodes = {
x: x, y: y, z: z,
mode: 'markers',
marker: { size: 12, color: 'red' },
type: 'scatter3d',
text: [0, 1, 2, 3, 4],
hoverinfo: 'text',
hoverlabel: {
bgcolor: 'white'
},
customdata: nodes.map(function(node) {
if (node.value !== undefined)
return node.value;
}),
type: 'scatter3d'
};
var layout = {
margin: { l: 0, r: 0, b: 0, t: 0 }
};
Plotly.newPlot('myDiv', [traceNodes], layout, { displayModeBar: false });
// max y value for the line plot
const ymax = Math.max(...nodes.map(n => n.value).flat());
document.getElementById('myDiv').on('plotly_click', function(data){
var nodeIndex = data.points[0].pointNumber;
var values = nodes[nodeIndex].value;
Plotly.newPlot('lineGraph', [{
type: 'scatter',
mode: 'lines',
x: [0, 1, 2],
y: values
}], {
margin: { t: 0 },
yaxis: {autorange: false, range: [0, ymax + 1]}
});
});
</script>
</body>
</html>
I am using angular-google-chart (https://github.com/FERNman/angular-google-charts) an angular wrapper for google-chart to display a column chart. I want to increase the margin between the x-axis labels and the x-axis.
In the picture below, the red part indicates where I want to increase the gap
Following the documentation, I added this code:
options: {
...
hAxis: {
textStyle: {
fontSize: 10,
fontStyle: "Arial",
marginTop: '10',
color: '#808080'
},
...
The color, font-size, and font-style is working, but can not get the margin gap. Any ideas? Thanks in advance.
use chartArea.bottom to increase the space on the x-axis
options: {
...
chartArea: {
bottom: 60
},
hAxis: {
textStyle: {
fontSize: 10,
fontStyle: "Arial",
marginTop: '10',
color: '#808080'
},
...
EDIT
although you can use bottom to increase the height of the x-axis,
the labels still align to the top of the x-axis.
but we can move them down manually, on the chart's 'ready' event,
by increasing the 'y' attribute,
see following working snippet...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('timeofday', 'Time of Day');
dataTable.addColumn('number', 'Motivation Level');
dataTable.addRows([
[[8, 0, 0], 46],
[[9, 0, 0], 46],
[[10, 0, 0], 34],
[[11, 0, 0], 4],
[[12, 0, 0], 5],
[[13, 0, 0], 6],
[[14, 0, 0], 7],
[[15, 0, 0], 8],
[[16, 0, 0], 9],
[[17, 0, 0], 10],
]);
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 24,
left: 60,
right: 16,
bottom: 100
},
height: '100%',
width: '100%',
hAxis: {
textStyle: {
fontSize: 10,
fontStyle: "Arial",
marginTop: '10',
color: '#808080'
}
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var labels = container.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
label.setAttribute('y', parseFloat(label.getAttribute('y')) + 20);
}
});
});
chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: bottom was added during release 43, on Oct. 2, 2015
Currently, my y-axis looks like this:
Meaning that it only goes as high as the highest value more or less. Is there a way to make it fixed so that it spans the whole duration of the day 00:00-23:59?
I am assuming it will have to be set in the vAxis part of options.
you can use --> vAxis.viewWindow.min and max
viewWindow: {
min: [0, 0, 0],
max: [23, 59, 59]
}
although the last label may not be shown,
the chart will extend to [23, 59, 59]
you can add --> ticks
to guarantee the last label is shown
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('timeofday', 'y');
data.addRows([
['10-19', [8, 0, 0]],
['10-20', [10, 0, 0]]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
vAxis: {
ticks: [
[0, 0, 0],
[4, 0, 0],
[8, 0, 0],
[12, 0, 0],
[16, 0, 0],
[20, 0, 0],
[23, 59, 59],
],
viewWindow: {
min: [0, 0, 0],
max: [23, 59, 59]
}
}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Ive been doing some research on stackoverflow however I cant seem to pinpoint my problem. This code worked for a little bit but it stopped working almost as fast. I am trying to get 3 google charts to show up on one page. Is there something wrong with the code?
Here it is below
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
'packages': ['line', 'corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
var chart0 = document.getElementById('curve_chart0');
var data0 = new google.visualization.DataTable();
data0.addColumn('string', '');
data0.addColumn('number', 'Altitude');
data0.addColumn('number', 'Speed');
data0.addRows([
['05:22:57', 6519, 0],
['05:24:00', 6519, 0],
['05:24:57', 6519, 0],
['05:25:57', 6519, 0],
['05:26:57', 6519, 0],
['05:27:58', 6519, 0],
['05:28:57', 6519, 0],
['05:29:58', 6519, 0],
['05:30:58', 6519, 0],
['05:31:58', 6519, 11],
['05:32:58', 6519, 0],
['05:33:58', 6519, 11]
]);
var options0 = {
chart: {
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Altitude'
},
1: {
axis: 'Speed'
}
},
width: 400,
height: 150,
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Altitude: {
label: 'Altitude'
},
Speed: {
label: 'Speed'
}
}
}
};
chart0 = new google.charts.Line(document.getElementById('curve_chart0'));
chart0.draw(data0, options0);
var chart1 = document.getElementById('curve_chart1');
var data1 = new google.visualization.DataTable();
data1.addColumn('string', '');
data1.addColumn('number', 'Altitude');
data1.addColumn('number', 'Speed');
data1.addRows([
['05:39:58', 116, 0],
['05:40:58', 116, 0],
['05:41:58', 116, 0],
['05:42:58', 116, 0],
['05:43:58', 116, 0],
['05:44:59', 116, 1],
['05:45:59', 116, 0],
['05:46:59', 116, 0],
['05:47:59', 116, 0],
['05:48:59', 116, 33],
['05:49:59', 116, 19],
['05:50:59', 116, 21],
['05:51:59', 116, 7],
['05:52:59', 116, 85],
['05:53:59', 3019, 196]
]);
var options1 = {
chart: {
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Altitude'
},
1: {
axis: 'Speed'
}
},
width: 400,
height: 150,
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Altitude: {
label: 'Altitude'
},
Speed: {
label: 'Speed'
}
}
}
};
chart1 = new google.charts.Line(document.getElementById('curve_chart1'));
chart1.draw(data1, options1);
var chart2 = document.getElementById('curve_chart2');
var data2 = new google.visualization.DataTable();
data2.addColumn('string', '');
data2.addColumn('number', 'Altitude');
data2.addColumn('number', 'Speed');
data2.addRows([
['23:58:54', 30, 0],
['23:59:54', 30, 0],
['00:00:54', 30, 1],
['00:01:54', 30, 1],
['00:02:54', 30, 0],
['00:03:54', 30, 0],
['00:04:54', 30, 0],
['00:05:54', 30, 13],
['00:06:54', 30, 17],
['00:07:54', 30, 21],
['00:08:54', 30, 5],
['00:09:55', 316, 178],
['00:10:55', 3770, 209],
['00:11:55', 6308, 241]
]);
var options2 = {
chart: {
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Altitude'
},
1: {
axis: 'Speed'
}
},
width: 400,
height: 150,
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Altitude: {
label: 'Altitude'
},
Speed: {
label: 'Speed'
}
}
}
};
chart2 = new google.charts.Line(document.getElementById('curve_chart2'));
chart2.draw(data2, options2);
}
</script>
</head>
<body>
<!--Divs that will hold the charts-->
<div id="curve_chart0"></div>
<div id="curve_chart1"></div>
<div id="curve_chart2"></div>
</body>
</html>
The following displays as you want though it uses the classical charts.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {
'packages': ['line', 'corechart']
});
google.setOnLoadCallback(drawChart);
function graph(div,data)
{
var data0 = new google.visualization.DataTable();
data0.addColumn('string', '');
data0.addColumn('number', 'Altitude');
data0.addColumn('number', 'Speed');
data0.addRows(data);
var options = {
chart: {
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
width: 400,
height: 150,
vAxes: {
// Adds labels to each axis; they don't have to match the axis names.
0: {title: 'Altitude'},
1: {title: 'Speed'}
}
};
var chart0 = new google.visualization.LineChart(document.getElementById(div));
chart0.draw(data0, options);
}
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
graph('curve_chart0',[
['05:22:57', 6519, 0],
['05:24:00', 6519, 0],
['05:24:57', 6519, 0],
['05:25:57', 6519, 0],
['05:26:57', 6519, 0],
['05:27:58', 6519, 0],
['05:28:57', 6519, 0],
['05:29:58', 6519, 0],
['05:30:58', 6519, 0],
['05:31:58', 6519, 11],
['05:32:58', 6519, 0],
['05:33:58', 6519, 11]
]);
graph('curve_chart1',[
['05:39:58', 116, 0],
['05:40:58', 116, 0],
['05:41:58', 116, 0],
['05:42:58', 116, 0],
['05:43:58', 116, 0],
['05:44:59', 116, 1],
['05:45:59', 116, 0],
['05:46:59', 116, 0],
['05:47:59', 116, 0],
['05:48:59', 116, 33],
['05:49:59', 116, 19],
['05:50:59', 116, 21],
['05:51:59', 116, 7],
['05:52:59', 116, 85],
['05:53:59', 3019, 196]
]);
graph('curve_chart2',[
['23:58:54', 30, 0],
['23:59:54', 30, 0],
['00:00:54', 30, 1],
['00:01:54', 30, 1],
['00:02:54', 30, 0],
['00:03:54', 30, 0],
['00:04:54', 30, 0],
['00:05:54', 30, 13],
['00:06:54', 30, 17],
['00:07:54', 30, 21],
['00:08:54', 30, 5],
['00:09:55', 316, 178],
['00:10:55', 3770, 209],
['00:11:55', 6308, 241]
]);
}
</script>
</head>
<body>
<!--Divs that will hold the charts-->
<div id="curve_chart0"></div>
<div id="curve_chart1"></div>
<div id="curve_chart2"></div>
</body>
</html>
Try this it works:-
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', { packages: ['line'] });
google.setOnLoadCallback(drawCharts);
function drawPageViews(chartReady) {
var data = new google.visualization.DataTable();
var div2 = document.getElementById("div2");
var labels = ['m', 'n', 'o', 'p', 'q', 'r', 's'];
data.addColumn('string', 'Day');
data.addColumn('number', 'PageViews');
var rows = new Array();
for (var i = 0; i < labels.length; i++) {
rows.push([labels[i], getRandomInt(0, 100)]);
}
data.addRows(rows);
var options = {
chart: {
title: 'Page views'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('div2'));
if(typeof chartReady !== 'undefined') google.visualization.events.addOneTimeListener(chart, 'ready', chartReady);
chart.draw(data, options);
}
function drawEventViews(chartReady) {
var data = new google.visualization.DataTable();
var div1 = document.getElementById("div1");
var labels = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
data.addColumn('string', 'Day');
data.addColumn('number', 'EventViews');
var rows = new Array();
for (var i = 0; i < labels.length; i++) {
rows.push([labels[i], getRandomInt(0, 100)]);
}
data.addRows(rows);
var options = {
chart: {
title: 'Event views'
},
width: 500,
height: 500
};
var chart = new google.charts.Line(document.getElementById('div1'));
if(typeof chartReady !== 'undefined') google.visualization.events.addOneTimeListener(chart, 'ready', chartReady);
chart.draw(data, options);
}
function drawCharts() {
drawPageViews(function(){
drawEventViews();
});
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>
</head>
<body>
<div id="div2"></div>
<div id="div1"></div>
</body>
</html>
I am working on project that need a line chart and I chose Google line chart because that is easy to get and fast to use but I have problem with customizing some feature in Google line chart is there a way to can customize Google chart like the this image?? I tried and use rotation but I didn't get the my outcome of that!!!
Here is the Google Line chart Sample Code
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
[1, 100], // keep linked points adjacent
[1, 200],
[null, null], // insert blank row in between
[2, 150],
[2, 275],
[null, null],
[3, 75],
[3, 200],
[null, null],
[4, 100],
[4, 300]
]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
pointSize: 20,
pointShape: 'triangle', rotation: 180
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
You can do this by splitting your data points into separate series and drawing them with different point shape options:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y', 'Direction'],
[1, 100, 'down'], // keep linked points adjacent
[1, 200, 'up'],
[null, null, null], // insert blank row in between
[2, 150, 'down'],
[2, 275, 'up'],
[null, null, null],
[3, 75, 'down'],
[3, 200, 'up'],
[null, null, null],
[4, 100, 'down'],
[4, 300, 'up']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
// down triangles
type: 'number',
calc: function (dt, row) {
return (dt.getValue(row, 2) == 'down') ? dt.getValue(row, 1) : null;
}
}, {
// up triangles
type: 'number',
calc: function (dt, row) {
return (dt.getValue(row, 2) == 'up') ? dt.getValue(row, 1) : null;
}
}]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(view, {
height: 400,
width: 600,
series: {
0: {
// this will draw the line
pointSize: 0,
color: '#3366cc' // set the color so they are all the same
},
1: {
// this will draw the down triangles
lineWidth: 0,
pointSize: 20,
pointShape: {
type: 'triangle',
rotation: 180
},
visibleInLegend: false,
color: '#3366cc' // set the color so they are all the same
},
2: {
// this will draw the up triangles
lineWidth: 0,
pointSize: 20,
pointShape: {
type: 'triangle'
},
visibleInLegend: false,
color: '#3366cc' // set the color so they are all the same
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
http://jsfiddle.net/asgallant/6dhm8u3y/