I'm trying to create a google candlestick chart, but also trying to overlay multiple lines on the same chart.
I'm able to draw one line over the candlestick if I do something like the following:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Low');
data.addColumn('number', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number', 'Average');
data.addRow('Mon', 1, 1, 2, 2, 1.5]);
data.addRow('Tue', 2, 2, 3, 3, 2.5]);
data.addRow('Wed', 2, 2, 4, 4, 3.5]);
var options = {
legend:'none',
series: {1: {type: 'line'}}
};
But I can't seem to figure out how to add a second line.
To avoid confusion, I'll leave out all of the things I've attempted, but the goal is to just add another data column and specify whatever is necessary to tell the chart to overlay the new data as a second line.
Is there any way to make this work?
sure, just keep adding line series as you have, using the series option...
for the CandleStickChart, five columns are required,
those five columns count as one series,
in this example, series 0
which makes the 6th column series 1
which you've changed to 'line'
1: {type: 'line'}
adding another column would be series 2,
just add another column and change the type...
1: {type: 'line'},
2: {type: 'line'}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Low');
data.addColumn('number', 'Open');
data.addColumn('number', 'Close');
data.addColumn('number', 'High');
data.addColumn('number', 'Average');
data.addColumn('number', 'Average 2');
data.addRow(['Mon', 1, 1, 2, 2, 1.5, 2.5]);
data.addRow(['Tue', 2, 2, 3, 3, 2.5, 3.5]);
data.addRow(['Wed', 2, 2, 4, 4, 3.5, 4.5]);
var options = {
legend: 'none',
series: {
1: {type: 'line'},
2: {type: 'line'}
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.CandlestickChart(container);
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Related
I am using Google Column charts.
As of now I got my chart as shown in the below image.
Here I have two columns in each category. I want to differentiate them by their type(Type-1, Type-2) like shown in the below image. How can I do this, is there any possibility for this.
you can use a data column role for --> 'annotation'
the 'annotation' column should follow each value it represents in the data table
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category Type');
data.addColumn('number', 'Type-1');
data.addColumn({role: 'annotation', type: 'string'});
data.addColumn('number', 'Type-2');
data.addColumn({role: 'annotation', type: 'string'});
data.addRows([
['Pri #1:', 4000, 'Type-1', 5000, 'Type-2'],
['Pri #2:', 6000, 'Type-1', 8000, 'Type-2'],
['Pri #3:', 1500, 'Type-1', 3000, 'Type-2'],
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(data, {
annotations: {
alwaysOutside: true
}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Sorry I don't know much about google graph api , there is what I have done
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day');
data.addColumn('number', 'Q1');
data.addColumn('number', 'Q2');
data.addColumn('number', 'Q3');
data.addColumn('number', 'Q4');
data.addRows([
['Day 1', 1,2,3,4,5 ],
['Day 2', 2,2,3,5,1 ],
['Day 3', 3,1,1,3,5 ],
]);
and it generate something like this:
what I want to do is to change value on vertical bar (1,2,3,4,5) to something like (a,b,c,d,e).
please help!!!
try adding this to your chart configuration options
vAxis: { ticks: ['a','b','c','d','e'] }
If I draw a line chart there is no problem but I want to have this on a histogram graph.. (https://developers.google.com/chart/interactive/docs/gallery/histogram)
For LineChart;
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
For Histogram;
var chart = new google.visualization.Histogram(document.querySelector('#chart_div'));
Other Codes;
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Value');
data.addRows([
['Foo', null, 4],
['Bar', null, 3],
['Baz', null, 7],
['Bat', null, 9],
['Cad', 'Vertical line here', 9],
['Qud', null, 2],
['Piz', null, 6]
]);
var chart = new google.visualization.Histogram(document.querySelector('#chart_div'));
chart.draw(data, {
height: 300,
width: 400,
annotation: {
// index here is the index of the DataTable column providing the annotation
1: {
style: 'line'
}
}
});
}
Daniel LaLiberte answered my question on Google Groups, who is a Senior Software Engineer at Google..
https://groups.google.com/forum/#!msg/google-visualization-api/7y3LrKETEwY/fR4HoYwBu-EJ
So it is not possible on Google Charts..
But :) Google Charts uses SVG.. For exp. I want to draw a line to 30 x axis..
var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
newLine.setAttribute('id', 'lineId');
newLine.setAttribute('style', 'stroke:rgb(0,0,0); stroke-width:3;');
newLine.setAttribute('x1', chart.getChartLayoutInterface().getXLocation(30));
newLine.setAttribute('y1', chart.getChartLayoutInterface().getChartAreaBoundingBox().top);
newLine.setAttribute('x2', chart.getChartLayoutInterface().getXLocation(30));
newLine.setAttribute('y2', chart.getChartLayoutInterface().getChartAreaBoundingBox().height + chart.getChartLayoutInterface().getChartAreaBoundingBox().top);
$("svg").append(newLine);
My problem is that, when i var_dump my array inside a separate file, the values are all correct, but when I require this file into another, in which i try using javascript with the rows i make, it returns me other values, and even erases parts of my array. Does someone know something about it?
Here's the code i'm using to generate the chart in the separate file:
var_dump($jsRows_scatter);
?>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'fixo');
data.addColumn('number', 'fixo');
data.addColumn('number', 'fixo');
data.addColumn('number', 'Afundamento');
data.addColumn('number', 'Elevação');
var foo = [<?php echo $jsRows_scatter; ?>];
data.addRows(foo)
var fool =[ <?php echo $jsRows_scatter1; ?>];
data.addRows(fool);
var fool1 =[ <?php echo $jsRows_1; ?>];
data.addRows(fool1);
var options = {
title: '',
hAxis: {title: 'Duração (ciclos)', minValue: 0, maxValue: 10,
logScale: 'true'
},
vAxis: {title: 'Intensidade (p.u)', minValue: 0, maxValue: 1},
legend: 'none',
pointSize: 5,
colors:['red','#004411','green','#00FF00'],
series: {
// series 0 is the Scatter
0: {
lineWidth: 1,
pointSize: 0
},
// series 1 is the Line
1: {
lineWidth: 1,
pointSize: 0,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});
</script>
<body>
<div id='chart_div' style="width:950px; height:300px;"></div>
</body>
and the var_dump($jsRows_scatter) returns me: string(243) "[1.0199998,null,null,null,null,0.00589003],[0.6599999,null,null,null,null,0.00589003],[4.6799991,null,null,null,null,0.5],[0.2400000,null,null,null,null,0.5],[0.2400000,null,null,null,null,0.77272727],[0.1200000,null,null,null,null,0.77272727]"(which is ok).
So i use require_once() to call this array into a javascript google charts function whose code is:
function analise_desequilibrio(medicao, analise){
var nome_analise='';
switch(analise){
case "unipede":
nome_analise="Similaridade entre dias";
document.getElementById("analises").innerHTML='<div id = "chart_div_carac_iec" style="width: 950px; text-align: center;"> </div>';
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'fixo');
data.addColumn('number', 'fixo');
data.addColumn('number', 'fixo');
data.addColumn('number', 'Afundamento');
data.addColumn('number', 'Elevação');
var foo = [<?php echo $jsRows_scatter;?>];
data.addRows(foo)
var fool =[<?php echo $jsRows_scatter1;?>];
data.addRows(fool);
var fool1 =[<?php echo $jsRows_1;?>];
data.addRows(fool1);
var options = {
title: '',
hAxis: {title: 'Duração (ciclos)', minValue: 0, maxValue: 10,
logScale: 'true'
},
vAxis: {title: 'Intensidade (p.u)', minValue: 0, maxValue: 1},
legend: 'none',
pointSize: 5,
colors:['red','#004411','green','#00FF00'],
series: {
// series 0 is the Scatter
0: {
lineWidth: 1,
pointSize: 0
},
// series 1 is the Line
1: {
lineWidth: 1,
pointSize: 0,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div_carac_iec'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});
break;
But, even before i reach the function with the steps on javascript, just as i use require_once() on this array file, my var_dump results: string(74) "[3,null,null,null,null,2],[1,null,null,null,null,],[,null,null,null,null,]" Which means lots of data were deleted somehow. Does someone know how to fix it? Thanks in advance!
I have created a google line chart that has multiple values over time like this
The data refers to historical data and from a point in time is forecasted data. I want to divide (split) the chart to differentiate the historical information of forecast information.
And get a chart like this:
Is there a way to do that?
You can get a vertical line like that by adding an 'annotation' role column to your domain (x-axis) column in the DataTable, and setting the annotation.<annotation column index>.style option to 'line'. Here's an example:
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Value');
data.addRows([
['Jun', null, 3],
['Jul', null, 5],
['Aug', null, 4],
['Sep', null, 4],
['Oct', null, 8],
['Nov', 'this month', 6],
['Dec', null, 2]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {
height: 400,
width: 600,
annotation: {
1: {
style: 'line'
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
see it working here: http://jsfiddle.net/asgallant/pkwqt/