Set to show only the 100 and -100 grids ticks: [-100, 100], but the horizontal 0 (zero) grid appears. How to hide?
<table class="columns">
<tr>
<th>Linear Scale</th>
</tr>
<tr>
<td><div id="linear_div"></div></td>
</tr>
</table>
<script>
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Population');
data.addRows([
[new Date(1400, 1, 1), -44],
[new Date(1500, 1, 1), 33],
[new Date(1600, 1, 1), 88],
[new Date(1700, 1, 1), 100],
[new Date(1750, 1, 1), 200],
]);
var linearOptions = {
title: 'World Population Since 1400 A.D. in Linear Scale',
legend: 'none',
width: 450,
height: 500,
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Population (millions)',
ticks: [-100, 100]
}
};
var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
linearChart.draw(data, linearOptions);
}
</script>
https://jsfiddle.net/dnsaudd8/
use following option to hide 0 (baseline)
baselineColor: 'transparent'
see following working snippet...
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Population');
data.addRows([
[new Date(1400, 1, 1), -44],
[new Date(1500, 1, 1), 33],
[new Date(1600, 1, 1), 88],
[new Date(1700, 1, 1), 100],
[new Date(1750, 1, 1), 200]
]);
var linearOptions = {
baselineColor: 'transparent',
title: 'World Population Since 1400 A.D. in Linear Scale',
legend: 'none',
width: 450,
height: 500,
hAxis: {
title: 'Date'
},
vAxis: {
title: 'Population (millions)',
ticks: [-100, 100]
}
};
var linearChart = new google.visualization.LineChart(document.getElementById('linear_div'));
linearChart.draw(data, linearOptions);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linear_div"></div>
Related
How do i display the vertical number in a column bar??
This a simple Google Column Chart, how do i display the numbers in the column bars on top???
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period Incident');
data.addColumn('number', '# of Incidents');
data.addRows([
['Mushrooms', 3],
['Onions', 4],
['Olives', 5],
['Zucchini', 11],
['Pepper', 7],
['Avocado', 4],
['Tomato', 5],
['Pepperoni', 2]
]);
// Set chart options
var options = {
'title':'How Much Pizza I Ate Last Night',
legend: { position: 'top', alignment: 'start' },
'width':570,
'height':420};
var chart = new google.visualization.ColumnChart(
document.getElementById('columnchartIncidents'));
chart.draw(data, options);
}
use the 'annotation' column role...
1) add annotation column to the data table...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period Incident');
data.addColumn('number', '# of Incidents');
// add annotation column role
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
['Mushrooms', 3, '3'], // <-- add annotations to the data
['Onions', 4, '4'],
['Olives', 5, '5'],
['Zucchini', 11, '11'],
['Pepper', 7, '7'],
['Avocado', 4, '4'],
['Tomato', 5, '5'],
['Pepperoni', 2, '2']
]);
var options = {
title: 'How Much Pizza I Ate Last Night',
legend: {
position: 'top',
alignment: 'start'
},
width: 570,
height: 420
};
var chart = new google.visualization.ColumnChart(
document.getElementById('columnchartIncidents')
);
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchartIncidents"></div>
2) or use a data view to add a calculated column for the annotation role...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Period Incident');
data.addColumn('number', '# of Incidents');
data.addRows([
['Mushrooms', 3],
['Onions', 4],
['Olives', 5],
['Zucchini', 11],
['Pepper', 7],
['Avocado', 4],
['Tomato', 5],
['Pepperoni', 2]
]);
// create data view
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
role: 'annotation',
sourceColumn: 1,
type: 'string'
}]);
var options = {
title: 'How Much Pizza I Ate Last Night',
legend: {
position: 'top',
alignment: 'start'
},
width: 570,
height: 420
};
var chart = new google.visualization.ColumnChart(
document.getElementById('columnchartIncidents')
);
chart.draw(view, options); // <-- draw chart with view
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchartIncidents"></div>
Am using google API to implement chart in my Project. Am using Scatter chart.
I need to implement chart like below. How can Achieve this.? Is there any other way to Achieve this by using any other Open source chart.?
Sample Google Chart which I need
Additional requirement
you can use a ComboChart to combine scatter and area series
the area series should be stacked
set the color of the first layer to 'transparent'
use null for values where the series do not coincide
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'area bottom');
data.addColumn('number', 'area top');
data.addColumn('number', 'scatter');
data.addRows([
[1.5, null, null, 1.5],
[3, 3, 3, null],
[6, 3, 3, null]
]);
var options = {
areaOpacity: 1,
colors: ['transparent', '#ff9900', '#3366cc'],
hAxis: {
format: '#,##0.0',
ticks: [0, 1.5, 3, 4.5, 6],
title: 'FINAL SCORE'
},
height: 320,
legend: {
position: 'none'
},
isStacked: true,
seriesType: 'area',
series: {
2: {
type: 'scatter'
}
},
title: 'Final Score',
vAxis: {
format: '#,##0.0',
ticks: [0, 1.5, 3, 4.5, 6],
title: 'FINAL SCORE'
},
width: 320
};
var chart = new google.visualization.ComboChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
UPDATE
just add another area layer for the new requirement...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'area bottom');
data.addColumn('number', 'area middle');
data.addColumn('number', 'area top');
data.addColumn('number', 'scatter');
data.addRows([
[1.5, null, null, null, 1.5],
[3, 3, 3, null, null],
[4.5, 3, 3, null, null],
[4.5, 3, 1.5, 1.5, null],
[6, 3, 1.5, 1.5, null]
]);
var options = {
areaOpacity: 1,
colors: ['transparent', '#ff9900', '#f8bbd0', '#3366cc'],
hAxis: {
format: '#,##0.0',
ticks: [0, 1.5, 3, 4.5, 6],
title: 'FINAL SCORE'
},
height: 320,
legend: {
position: 'none'
},
isStacked: true,
seriesType: 'area',
series: {
3: {
type: 'scatter'
}
},
title: 'Final Score',
vAxis: {
format: '#,##0.0',
ticks: [0, 1.5, 3, 4.5, 6],
title: 'FINAL SCORE'
},
width: 320
};
var chart = new google.visualization.ComboChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
How to mix line and scatter plot on one chart?
Column 1: Y (date)
Column 2: X1 (number, as points/dots)
Column 3: X2 (number, as line)
Example JsFiddle: https://jsfiddle.net/e64y5wfj/4/
It's doesn't seems a way or example on the documentation.
use the series option to change the style of Column 2
series: {
0: {
pointSize: 8,
lineWidth: 0
}
}
see following working snippet...
google.charts.load('current', {
callback: drawMultipleTrendlineChart,
packages:['corechart']
});
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');
data.addRows([
[new Date(2013, 3, 11), 200, 1000],
[new Date(2013, 4, 02), 500, 650],
[new Date(2013, 5, 03), 700, 550],
[new Date(2013, 6, 04), 800, 95],
[new Date(2013, 7, 05), 500, 400],
[new Date(2013, 8, 06), 900, 250],
[new Date(2014, 0, 07), 800, 300],
[new Date(2014, 1, 08), 2000, 200],
[new Date(2014, 2, 09), 1000, 312]
]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: 'R$:'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 600;
var chartOptions = {
tooltip: {
isHtml: true
},
title: 'multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8', '#00dddd'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 50,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
},
series: {
0: {
pointSize: 8,
lineWidth: 0
}
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="multipleTrendChart"></div>
I read the API reference from google developer website. For material line chart, there is example from here. Could anyone tell me how to remove the bottom "Month"? I think it should be worked by some code like:
hAxis: {
title: ''
}
In addition, most of the hAxis and vAxis features don't work.
that is correct, the following option will remove the x-axis title...
hAxis: {
title: ''
},
just be sure to use the options conversion method for material charts...
//convert options
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
see following working snippet...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addRows([
[new Date(2014, 0), -.5, 5.7],
[new Date(2014, 1), .4, 8.7],
[new Date(2014, 2), .5, 12],
[new Date(2014, 3), 2.9, 15.3],
[new Date(2014, 4), 6.3, 18.6],
[new Date(2014, 5), 9, 20.9],
[new Date(2014, 6), 10.6, 19.8],
[new Date(2014, 7), 10.3, 16.6],
[new Date(2014, 8), 7.4, 13.3],
[new Date(2014, 9), 4.4, 9.9],
[new Date(2014, 10), 1.1, 6.6],
[new Date(2014, 11), -.2, 4.5]
]);
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'}
},
hAxis: {
title: ''
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
}
}
};
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.LineChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawMaterialChart();
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button id="change-chart">Change to Classic</button>
<br><br>
<div id="chart_div"></div>
note: the conversion method will not work for all options,
many simply aren't supported...
see --> Tracking Issue for Material Chart Feature Parity
another route would be to use a classic chart with the following option...
theme: 'material'
I'm using Google Chart in my application with the following code (JSFiddle):
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'date');
data.addColumn('number', 'view');
data.addRows([
[new Date('2015-08-01'), 5],
[new Date('2015-08-02'), 7],
[new Date('2015-08-03'), 2],
[new Date('2015-08-04'), 16],
[new Date('2015-08-05'), 3],
[new Date('2015-08-06'), 6],
[new Date('2015-08-07'), 1]
]);
var options = {
title: 'view count',
width: 900,
height: 500,
hAxis: {
format: 'MM-dd',
gridlines: {count: 90}
},
vAxis: {
minValue: 0,
gridlines: {
color: '#f3f3f3',
count: 6
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
However, the chart does not match between date and gridlines:
How can I match (synchronize) grid and date?
Changing the date format (mm/dd/yyyy vs. yyyy-mm-dd) seems to get it to align...
google.load('visualization', '1', {
packages: ['corechart']
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'date');
data.addColumn('number', 'view');
data.addRows([
[new Date('08/01/2015'), 5],
[new Date('08/02/2015'), 7],
[new Date('08/03/2015'), 2],
[new Date('08/04/2015'), 16],
[new Date('08/05/2015'), 3],
[new Date('08/06/2015'), 6],
[new Date('08/07/2015'), 1]
]);
var options = {
title: 'view count',
width: 900,
height: 500,
hAxis: {
format: 'MM-dd',
gridlines: {
count: 90
}
},
vAxis: {
minValue: 0,
gridlines: {
color: '#f3f3f3',
count: 6
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>