I am using Google Charts for a simple Area Chart. I have many points to draw, i would like to set the interval between them. At the moment there is a list 1,2,3,4,5,6,7 etc
I would like to show all points but with custom hAxis labels, like: 0 5 10 15 20 etc
The code is:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Day', 'Visit', 'Applic.'],
['1', 19, 1],
['2', 100, 9],
['3', 103, 18],
['4', 42, 8],
['5', 34, 2],
['6', 63, 9],
['7', 35, 7],
['8', 427, 51],
['9', 314, 38],
['10', 71, 4],
['11', 27, 0],
['12', 25, 0],
['13', 78, 0],
['14', 54, 0],
['15', 60, 0],
['16', 47, 0],
['17', 29, 0],
['18', 16, 0],
['19', 10, 0],
['20', 26, 0],
['21', 200, 0],
['22', 255, 0],
['23', 160, 0],
['24', 30, 0],
['25', 35, 0],
['26', 9, 0],
]);
var options = {
vAxis: {minValue: 0},
hAxis: {
title: 'Days',
},
pointSize: 8,
colors: ['#9EC653', '#475825'],
chartArea: {
left: 40,
top: 40,
width: 600,
height: 250
},
legend: {position: 'top', textStyle: {fontSize: 14}, alignment: 'center'},
backgroundColor: '#f7f6f4',
};
var chart = new google.visualization.AreaChart(document.getElementById('visits'));
chart.draw(data, options);
}
</script>
And the result is:
The horizontal labels represent all points, I need all of them, but showing specific horizontal labels. How can i set specific interval?
Thanks
This will be much easier to achieve if you enter your axis values as numbers instead of strings:
var data = google.visualization.arrayToDataTable([
['Day', 'Visit', 'Applic.'],
[1, 19, 1],
[2, 100, 9],
[3, 103, 18],
[4, 42, 8],
[5, 34, 2],
[6, 63, 9],
[7, 35, 7],
[8, 427, 51],
[9, 314, 38],
[10, 71, 4],
[11, 27, 0],
[12, 25, 0],
[13, 78, 0],
[14, 54, 0],
[15, 60, 0],
[16, 47, 0],
[17, 29, 0],
[18, 16, 0],
[19, 10, 0],
[20, 26, 0],
[21, 200, 0],
[22, 255, 0],
[23, 160, 0],
[24, 30, 0],
[25, 35, 0],
[26, 9, 0]
]);
You can then specify the hAxis.ticks option to tell the chart which values should be labeled on the axis:
hAxis: {
title: 'Days',
ticks: [0, 5, 10, 15, 25]
}
Related
I'm working on adding a linear trendline to my chart which represents a 24 hour clock. Only some of the hours will contain data. In my example, I expect a positive trend when considering I have data present in hours 7 to 10 only.
It appears as if all the Zero values are contributing to the trendline in my example code. This results in a negative trendline.
Is there a way I can make the trendline apply to only the values which are present?
Thanks as always to the experts out there!
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Hour', 'Value'],
[0, 0],
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[5, 0],
[6, 0],
[7, 5],
[8, 15],
[9, 10],
[10, 20],
[11, 0],
[12, 0],
[13, 0],
[14, 0],
[15, 0],
[16, 0],
[17, 0],
[18, 0],
[19, 0],
[20, 0],
[21, 0],
[22, 0],
[23, 0],
[24, 0]
]);
var options = {
title: 'Task completed per Hour',
vAxis: {
title: 'Count'
},
hAxis: {
title: 'Hour',
slantedText: false,
ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
},
seriesType: 'bars',
series: {},
trendlines: {
0: {type: 'linear'}
},
isStacked: false
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" ></div>
try replacing zero with null
see following working snippet...
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Hour', 'Value'],
[0, null],
[1, null],
[2, null],
[3, null],
[4, null],
[5, null],
[6, null],
[7, 5],
[8, 15],
[9, 10],
[10, 20],
[11, null],
[12, null],
[13, null],
[14, null],
[15, null],
[16, null],
[17, null],
[18, null],
[19, null],
[20, null],
[21, null],
[22, null],
[23, null],
[24, null]
]);
var options = {
title: 'Task completed per Hour',
vAxis: {
title: 'Count'
},
hAxis: {
title: 'Hour',
slantedText: false,
ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
},
seriesType: 'bars',
series: {},
trendlines: {
0: {
type: 'linear'
}
},
isStacked: false
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I add a baseline to v-axis in Google Chart.
vAxis: {
title: 'Popularity', baseline: 20, baselineColor: 'red'
}
And I want to show the value of the baseline like this.
How can I do it?
This is the whole code in jsfiddle.
https://jsfiddle.net/ztn5fmnw/
need a few more options to get exactly as the posted image
but first, need to add another column to the data table
no data is needed in the new column,
just add it after the orignal data has been loaded
data.addColumn('number', 'y1');
the new series will be assigned to a second y-axis (on the right side)
this will allow customization of the second y-axis
series: {
1: {
targetAxisIndex: 1, // <-- assign y1 to second y-axis
visibleInLegend: false // <-- hide from legend
}
},
next, both y-axis will need the same range
use vAxis.viewWindow to set the range for both
vAxis: {
title: 'Popularity', baseline: 20, baselineColor: 'red',
viewWindow: {
min: 0,
max: 100
}
},
then use the vAxes option to customize only the second y-axis
use ticks to add the value of the baseline
vAxes: {
1: {
textStyle: {
color: 'red'
},
ticks: [20]
}
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'y0');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
[66, 70], [67, 72], [68, 75], [69, 80]
]);
data.addColumn('number', 'y1');
var options = {
hAxis: {
title: 'Time'
},
series: {
1: {
targetAxisIndex: 1,
visibleInLegend: false
}
},
vAxis: {
title: 'Popularity', baseline: 20, baselineColor: 'red',
viewWindow: {
min: 0,
max: 100
}
},
vAxes: {
1: {
textStyle: {
color: 'red'
},
ticks: [20]
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have displayed the line chart using google chart. But the tool-tip is having position issue. I have looked for the solution but i could not get any solution for that. This is my code. Please give me solution.
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Price');
data.addRows([
[0, 0],
[1, 10],
[2, 23],
[3, 17],
[4, 18],
[5, 9],
[6, 11],
[7, 27],
[8, 33],
[9, 40],
[10, 32],
[11, 35],
[12, 30],
[13, 40],
[14, 42],
[15, 47],
[16, 44],
[17, 48],
[18, 52],
[19, 54],
[20, 42],
[21, 55],
[22, 56],
[23, 57],
[24, 60],
[25, 50],
[26, 52],
[27, 51],
[28, 49],
[29, 53],
[30, 55],
[31, 60],
[32, 61],
[33, 59],
[34, 62],
[35, 65],
[36, 62],
[37, 58],
[38, 55],
[39, 61],
[40, 64],
[41, 65],
[42, 63],
[43, 66],
[44, 67],
[45, 69],
[46, 69],
[47, 70],
[48, 72],
[49, 68],
[50, 66],
[51, 65],
[52, 67],
[53, 70],
[54, 71],
[55, 72],
[56, 73],
[57, 75],
[58, 70],
[59, 68],
[60, 64],
[61, 60],
[62, 65],
[63, 67],
[64, 68],
[65, 69],
[66, 70],
[67, 72],
[68, 75],
[69, 80]
]);
var options = {
'height': 200,
trendlines: {
0: {
color: 'green',
tooltip: false,
labelInLegend: 'Trendline',
visibleInLegend: true
}
},
title: '2 Year Historical Daily Stock Price',
chartArea: {
left: 70,
width: "60%"
},
legend: {
position: 'right',
textStyle: {
fontSize: 8
}
},
timeline: {
groupByRowLabel: true
},
hAxis: {
title: 'Date (drag to zoom, right click to reset)',
format: 'MMM yy',
textStyle: {
fontSize: 5
},
gridlines: {
count: 6
}
},
vAxis: {
title: 'USD $'
},
explorer: {
axis: 'horizontal',
actions: ['dragToZoom', 'rightClickToReset']
}
};
var chart = new google.visualization.LineChart(document.getElementById('previewTwoYearChart'));
chart.draw(data, options);
}
Remove the following options from the js
tooltip: { isHtml: true }
isStacked: 'relative'
and add the following css in stylesheet
text {
font: 8px sans-serif;
pointer-events: none;
}
Hopefully this solution would be worked
Any ideas how to implement the x and y values on the same row ?
Currently im up to this and have quite big problem to set the x and y on two rows 1 under other.
var options = {
isStacked:true,
hAxis: {
gridlines: {
color: '#fff',
count: 8
},
showTextEvery: 1,
title: 'КМ/Ч'
},
vAxis: {
gridlines: {
color: '#fff',
count: 8
},
minorGridlines: {
color: 'red'
},
viewWindowMode: 'explicit',
viewWindow: {
max: 100
},
title: 'ЧАС'
},
axisTitlesPosition: 'out',
axes: {
y: {
0: { side: 'top'}
}
},
legend: {
position: 'none'
},
annotations: {
},
backgroundColor: {
stroke: '#fff',
fill: '#fff',
strokeWidth: 0
}
};
http://jsfiddle.net/Qquse/1645/
If I understand your question, you want to plot both values from each row in the array.
The problem is the LineChart is looking for some sort of label in the first column to use on the h-axis.
Here, I use a view to create a duplicate column for the row labels...
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[1, 10], [2, 23], [3, 17], [4, 18], [5, 9], [11, 35],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
[66, 70], [67, 72], [68, 75], [69, 80]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{calc: "stringify", sourceColumn: 0, type: "string"},0,1]);
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(view, {});
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
<script src="https://www.google.com/jsapi"></script>
<div id="chart"></div>
I am working with high charts, I have a set of controls on a web page that allows the user to select months and locations. The issue is if they select a location that has no data. So lets say they select January and Hawaii but there is no data for Hawaii in January. Nothing will be displayed at all, but I would like the axis to appear along with the labels.
NOTE: I am trying to create a heatmap so I don't want to see the minimun color when there is no data.
A value of null seems to work. You can change your tooltip to not display if the value is null too: http://jsfiddle.net/SheldonNeilson/95um4x0q/1/
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/heatmap.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
$(function () {
$('#container').highcharts({
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: Highcharts.getOptions().colors[0],
maxColor: '#FFFFFF'
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
if(this.point.value == null){
return 'No data' ;
}else{
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
}
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [[0, 0, null], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
});