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>
Related
I have created a Treemap using google charts.
Here is the code:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 20, 0],
['Europe', 'Global', 30, 0],
['Asia', 'Global', 10, 0],
['Australia', 'Global', 40, 0],
['Africa', 'Global', 30, 0],
]);
tree = new
google.visualization.TreeMap(document.getElementById('chart_div'));
google.visualization.events.addListener(tree, 'select', function () {
tree.setSelection([]);
});
tree.draw(data, {
headerHeight: 15,
fontColor: 'black',
showScale: true,
maxDepth: 2
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
It shows the tree map as:
Now, I want to show the values of Market trade volume (size) as well on the treemap (without any action of the mouse). since It has only one layer so directly value can be shown without any calculation.
I searched in the documentation but couldn't find anything similar.
a couple assumptions are made here...
1) you do not want to show the value for Global --> Global(0)
2) you don't want to modify the values in the data table or how it is loaded
using object notation, we can provide the value (v:) and the formatted value (f:)
the chart will display the formatted value, but use the value when determining tree order
this allows us to change the display without affecting the relationships,
in case you have data with more than one layer...
as such, a DataView is used to modify the values
use the setColumns method to provide a calculated column for the label
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var rowValue;
if (row === 0) {
rowValue = dt.getValue(row, 0); // value for global
} else {
// change display value by changing formatted value
rowValue = {
v: dt.getValue(row, 0),
f: dt.getValue(row, 0) + '(' + dt.getFormattedValue(row, 2) + ')'
};
}
return rowValue;
},
label: data.getColumnLabel(0),
type: data.getColumnType(0)
}, 1, 2, 3]);
see following working snippet...
google.charts.load('current', {
packages: ['treemap']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 20, 0],
['Europe', 'Global', 30, 0],
['Asia', 'Global', 10, 0],
['Australia', 'Global', 40, 0],
['Africa', 'Global', 30, 0],
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var rowValue;
if (row === 0) {
rowValue = dt.getValue(row, 0); // value for global
} else {
// change display value by changing formatted value
rowValue = {
v: dt.getValue(row, 0),
f: dt.getValue(row, 0) + '(' + dt.getFormattedValue(row, 2) + ')'
};
}
return rowValue;
},
label: data.getColumnLabel(0),
type: data.getColumnType(0)
}, 1, 2, 3]);
var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
google.visualization.events.addListener(tree, 'select', function () {
tree.setSelection([]);
});
tree.draw(view, {
headerHeight: 15,
fontColor: 'black',
showScale: true,
maxDepth: 2
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Thanks to WhiteHat for putting me on the right track. Using his answer I've found another way to achieve this that deviates less from the original example.
This also allows nesting by the ID. In the example below, you can USA displays as 'United States of America', but the states below link back up to the 'USA' id.
More importantly for me is that it gives the ability for 2 items to have the same label. Notice there is a London in Europe>UK and America>Canada>Ontario.
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 30, 0],
['Asia', 'Global', 10, 0],
['Australia', 'Global', 40, 0],
['Africa', 'Global', 30, 0],
[{ v: 'USA', f: 'United States of America' }, 'America', 20, 0],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['Ontario', 'Canada', 12, -9],
['Alberta', 'Canada', 24, 13],
['UK', 'Europe', 21, -5],
[{ v: '123', f: 'London' }, 'UK', 21, -5],
[{ v: '456', f: 'London' }, 'Ontario', 21, -5],
['Ohio', 'USA', 12, 3],
['Rhode Island', 'USA', 24, 4]
]);
tree = new
google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data, {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black'
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Has anyone figured out how to use html in a tick in a google chart? I am trying to add a weather icon from http://erikflowers.github.io/weather-icons
This is what I have tried:
const dailyData = new google.visualization.DataTable();
dailyData.addColumn('timeofday', 'Hour');
dailyData.addColumn('number', 'Visits');
let mTicks = [];
for(let i: number = 8; i <22; i++) {
let timeofday: any = [parseFloat(parsedData[0].data[i].name[1]),0,0];
let weatherIcon = '-';
if(parsedData[0].data[i].weather_code > 0) {
let weather = new WeatherFunctions(parsedData[0].data[i].weather_code).getResult();
weatherIcon = weather.icon;
}
let fullString: string = `${i}:00 <br/> ${weatherIcon}`;
dailyData.addRow([timeofday, parsedData[0].data[i].visits]);
mTicks.push({v: timeofday, f: fullString});
}
const options: any = {
allowHTML: true,
legend: {
position: 'none'
},
hAxis: {
ticks:mTicks
,
title: 'Time - Weather - Temperature'
}
};
where full string = "8:00 <i class="wi wi-day-sunny-overcast"></i>".
However any html in the string means that the ticks do not display.
since the chart is built using SVG,
HTML is not supported when included in chart elements
(other than tooltips)
however, the chart provides methods that can be used to position HTML overlays
on the chart's 'ready' event, you can use chart method --> getChartLayoutInterface()
the interface has a method --> getBoundingBox()
provide the id of a chart element, and it will return the coordinates
to get the position of the first x-axis label...
var chartLayout = chart.getChartLayoutInterface();
var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#0');
use these coordinates to position your HTML overlay
see following working snippet,
an image is added just after each x-axis label...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Hour');
data.addColumn('number', 'Visits');
data.addRows([
[[0, 0, 0, 0], 10],
[[0, 1, 0, 0], 11],
[[0, 2, 0, 0], 12],
[[0, 3, 0, 0], 13],
[[0, 4, 0, 0], 14],
[[0, 5, 0, 0], 15],
[[0, 6, 0, 0], 16],
[[0, 7, 0, 0], 17],
[[0, 8, 0, 0], 18],
[[0, 9, 0, 0], 19],
[[0, 10, 0, 0], 20],
[[0, 11, 0, 0], 21],
[[0, 12, 0, 0], 22],
[[0, 13, 0, 0], 23]
]);
// build chart ticks
var xAxisTicks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
xAxisTicks.push({
v: data.getValue(i, 0),
f: data.getFormattedValue(i, 0)
});
}
var options = {
chartArea: {
height: '100%',
width: '100%',
top: 60,
left: 60,
right: 60,
bottom: 60
},
hAxis: {
ticks: xAxisTicks
},
height: '100%',
legend: {
position: 'top'
},
width: '100%'
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
var tickIcons = [];
google.visualization.events.addListener(chart, 'ready', function () {
// remove old ticks
var index = tickIcons.length;
while (index--) {
container.removeChild(tickIcons[index]);
tickIcons.pop();
}
// add ticks
var chartLayout = chart.getChartLayoutInterface();
var labelPadding = 2;
xAxisTicks.forEach(function (tick, index) {
var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#' + index);
var tickIcon = document.createElement('IMG');
tickIcon.className = 'tickIcon';
tickIcon.src = 'http://findicons.com/files/icons/512/star_wars/16/clone_old.png';
tickIcon.style.left = (labelBounds.left + labelBounds.width + labelPadding) + 'px';
tickIcon.style.top = labelBounds.top + 'px';
tickIcons.push(container.appendChild(tickIcon));
});
});
drawChart();
window.addEventListener('resize', drawChart, false);
function drawChart() {
chart.draw(data, options);
}
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
.chart {
height: 100%;
}
.tickIcon {
position: absolute;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>
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>
I currently have a nice AreaChart using GoogleCharts, however I'm trying to change the color and background color of the chart when values are negative.
From what I found, idea would be to display one area for positive values only, and another one for negative values, so that I could custom colors. However you can see below I didn't really success to do it.
Any idea?
Thanks,
Tim
google.charts.load('current', {
packages: ['corechart', 'line']
});
google.charts.setOnLoadCallback(drawLineColors);
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
},
colors: ['#FF0000', '#0000FF']
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([0, {
calc: function(data, row) {
return data.getValue(row, 2) - data.getValue(row, 1);
},
type: 'number',
label: 'Blue'
}]);
dataView.setColumns([1, {
calc: function(data, row) {
return data.getValue(row, 1) - data.getValue(row, 2);
},
type: 'number',
label: 'Red'
}]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
the config option for colors maps a color to each series
in this case, there is only one series (or column) -- variance
instead, use a style column role to define the color for each row
also: using setColumns multiple times, overwrites any previous calls to setColumns
provide all the columns at the same time
the columns array can contain...
an integer as a reference to a column index of the data table
or an object for a custom function
see following working snippet...
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
}
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// variance
{
calc: function(data, row) {
return data.getValue(row, 2) - data.getValue(row, 1);
},
type: 'number',
label: 'Y'
},
// variance color
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val >= 0) {
return '#0000FF';
}
return '#FF0000';
},
type: 'string',
role: 'style'
}
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
or if you want separate lines for each team...
google.charts.load('current', {
callback: drawLineColors,
packages: ['corechart']
});
function drawLineColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Blue Team');
data.addColumn('number', 'Red Team');
data.addRows([
[0, 0, 0],
[3, 1700, 1600],
[6, 1800, 1700],
[9, 2500, 2423],
[12, 3000, 2500],
[15, 4700, 5800],
[18, 5200, 5900],
[21, 5500, 6000],
[24, 6000, 6200],
[27, 6800, 6700],
[30, 7500, 7000],
[33, 7800, 8200],
[36, 7900, 9756],
[39, 8000, 10752],
[42, 9000, 13753],
[45, 15000, 17845]
]);
var options = {
legend: {
position: 'top'
},
enableInteractivity: false,
width: 712,
height: 156,
backgroundColor: {
fill: 'transparent'
},
curveType: 'function',
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Team Gold'
},
colors: ['#0000FF', '#FF0000']
};
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference first column by index
0,
// team Y is better
{
calc: function(data, row) {
var val = data.getValue(row, 2) - data.getValue(row, 1);
if (val > 0) {
return val;
}
return null;
},
type: 'number',
label: 'Blue'
},
// team X is better
{
calc: function(data, row) {
var val = data.getValue(row, 1) - data.getValue(row, 2);
if (val > 0) {
return val;
}
return null;
},
type: 'number',
label: 'Red'
},
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(dataView, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
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/