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>
Related
Customize google linechart to show box instead tool tip on hover. Kindly check the wireframe attached to understand the customization i need.
Tried google line charts examples , no option to add customized html inside function.
google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
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 = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
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
I'm trying to make a for loop in JavaScript which generates a point in a multi-dimensional array every time a certain process is executed.
I'm using a Google Charts graph and have more or less completely copied one of theirs into my own project, but the graph is using their points.
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawTrendlines);
function drawTrendlines() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Value y');
data.addColumn('number', 'Value Y');
data.addRows([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]);
var options = {
hAxis: {
title: 'Analysis number'
},
colors: ['blue', 'darkgreen'],
trendlines: {
0: {type: 'linear', color: 'red', opacity: .5}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
How could I make a loop which would put the data in the form [x,y,Y] where x always increments by 1 (x++) whenever a process is executed (method foo() for example), and the y & Y values are recorded and graphed.
Values y and Y are two separate integer values which are obtained in a Ruby on Rails part of the project.
I'm not really sure where to even begin in terms of syntax, and have seen a similar question here, but it doesn't really solve my problem.
Many thanks in advance!
Create an array which you can insert into, loop over your data source, and then add it to the chart.
var rows = [];
for (var x = 0; x < 70; x++) {
rows.push([x, y, Y]);
}
data.addRows(rows);
i am using google charts for displaying some user stats.
How can I remove text on bottom of google line chart?
Check in red circle
http://i49.tinypic.com/se3cpj.jpg
hAxis: { textPosition: 'none' }
View the related documentation here (search for "textPosition"): https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart
So a full, simple example would be this:
google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
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 = {
hAxis: {
textPosition: 'none'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Run the code yourself here: https://jsfiddle.net/p80uggL0/1/
Try changing x-axis label font color same as background color like this
chart.draw(daily, {
hAxis : {textColor: '#ffffff'},
[... your other options here ...]
});
if its not working use hAxis: {baselineColor: '#FFFFFF'} instead of textColor, anyone of these should work.
if it is PieChart, and then like this.
legend : { position : 'none' }
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
fontSize: 10,
legend : { position : 'none' }
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}