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!
Related
I have a Google Chart (column-chart) showing a single dated (Jan-2010 = 2010-01-01) column - but the resulting column seems to run from 1-Jul-09 through to 1-Jul-10 (note this seems to change depending on the width of the screen); how can I fix this so that the column sits only on the 01-Jan-2010 date? (**Note, the dates/values are variable and can include one or hundreds of column values so we CANNOT simply hard code this or change the column type from 'date' to 'string').
var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dt');
data.addColumn('number', 'Open');
data.addColumn('number', 'Closed');
data.addRows(arr);
var options_stacked = {
isStacked: true,
height: 300,
colors: ['#111', '#a00'],
hAxis: {
slantedText: false,
format: 'd/MMM/yy',
},
legend: {
position: 'top',
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options_stacked);
A demonstrator for this can be found on https://jsfiddle.net/Abeeee/d5fojtp2/34/
you can add custom ticks to ensure each column "sits" on the correct date.
the ticks option expects an array of values.
we can use DataTable method --> getDistinctValue(colIndex)
to return the date values from the data table.
var xTicks = data.getDistinctValues(0);
hAxis: {
slantedText: false,
format: 'd.MMM.yy', <---- changed from 'd/MMM/yy' to avoid line breaks
ticks: xTicks
},
see following working snippet...
function doTest() {
var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dt');
data.addColumn('number', 'Open');
data.addColumn('number', 'Closed');
data.addRows(arr);
var xTicks = data.getDistinctValues(0);
var options_stacked = {
isStacked: true,
height: 300,
colors: ['#111', '#a00'],
hAxis: {
slantedText: false,
format: 'd/MMM/yy',
ticks: xTicks
},
legend: {
position: 'top',
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options_stacked);
}
window.addEventListener('resize', doTest);
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(doTest);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<h1>Google Charts</h1>
<div id="chart_div"></div>
How to add a point inside the Google Charts Visualization: Area chart like the red point in the picture shown above and can i put some label above or beside the point?
Here is the code that outputs the chart above
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Output1');
data.addColumn('number', 'Height');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
<?php echo"['', 2, null],"; ?>
<?php echo"['', 2, '1 Kpa ---------->'],"; ?>
<?php echo"['2', 1, '<---------- 2'],"; ?>
<?php echo"['3 σ', 0, '<---------- 3 σ']"; ?>
]);
var options = {
title: 'Total Stress',
hAxis: {title: '<-------- Direction', titleTextStyle: {color: '#333'}},
vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length ^ 1 m'},{v:0, f:'1 m'}] }
};
var chart = new google.visualization.AreaChart(document.getElementById('total_stress'));
chart.draw(data, options);
}
you can use a ComboChart to combine series types
add another column to the data table for the point
in the options, define the series types, use 'scatter' for points
seriesType: 'area',
series: {
1: {
type: 'scatter'
}
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Output1');
data.addColumn('number', 'Height');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number', 'Scatter');
data.addRows([
['', 2, null, null],
['', 2, '1 Kpa ---------->', 1],
['2', 1, '<---------- 2', null],
['3 s', 0, '<---------- 3 s', null]
]);
var options = {
title: 'Total Stress',
hAxis: {title: '<-------- Direction', titleTextStyle: {color: '#333'}},
vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length ^ 1 m'},{v:0, f:'1 m'}] },
seriesType: 'area',
series: {
1: {
type: 'scatter'
}
}
};
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>
I would like to show a stacked bar chart with grouped bars and only one row of horizontal axis labels. From what I found, it is not currently possible to show a stacked BarChart with grouped bars using visualization.BarChart as of the Google Visualization API v44 , but this is possible with the material Bar chart by using the series array option.
For example:
google.charts.load('44', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Nothing');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Red');
data.addRows([
['Row 1', 14, 1, 3, 0, 1, 36],
['Row 2', 10, 1, 0, 2, 2, 23],
]);
var options = {
legend: {
position: 'none'
},
isStacked: true,
series: {
5: {
targetAxisIndex: 1
}
},
hAxis: {
viewWindow: {
min: 0,
max: 40
},
textPosition: 'none',
ticks: [null],
title: 'Hide one of the axis values '
},
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>
My problem is that the horizontal axis range/ticks match for both bars, so showing 2 with the exact same tick values on the bottom is redundant. With the non-material BarChart, the textPosition: 'none' option can be used to hide labels for an axis, but this option is not currently supported in material bar charts. Is there another way that one of these axis labels/ticks can be hidden in a non-hacky way?
Note that textPosition has no effect.
couldn't find a way to hide the tick marks
but you can move them to the top
see following working snippet...
google.charts.load('44', {
callback: drawChart,
packages: ['bar']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Nothing');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Red');
data.addRows([
['Row 1', 14, 1, 3, 0, 1, 36],
['Row 2', 10, 1, 0, 2, 2, 23]
]);
var options = {
legend: {
position: 'none'
},
isStacked: true,
series: {
5: {
axis: 'red'
}
},
axes: {
x: {
red: {
label: '',
side: 'top'
}
}
},
hAxis: {
viewWindow: {
min: 0,
max: 40
},
title: 'Hide one of the axis values'
},
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>
UPDATE
another option would be to modify the chart's svg manually,
once the 'ready' event fires
here, the top labels are hidden when the chart is drawn...
google.charts.load('44', {
callback: drawChart,
packages: ['bar']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Nothing');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Red');
data.addRows([
['Row 1', 14, 1, 3, 0, 1, 36],
['Row 2', 10, 1, 0, 2, 2, 23]
]);
var options = {
legend: {
position: 'none'
},
isStacked: true,
series: {
5: {
axis: 'red'
}
},
axes: {
x: {
red: {
label: '',
side: 'top'
}
}
},
hAxis: {
viewWindow: {
min: 0,
max: 40
},
title: 'Hide one of the axis values'
},
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
google.visualization.events.addListener(chart, 'ready', function () {
$.each($('#stacked-grouped-chart text'), function (index, label) {
if (parseFloat($(label).attr('y')) < 20) {
$(label).attr('fill', 'none');
}
});
});
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>
var options = {
hAxis : {
format : 'none'
}
}
i am using google chart api to show a chart on a bootstrap modal with framework Laravel, i'm having an issue because i'm not beein able to change the colour of the bar and put one blue and the other one green, another issue is that at the right it only put me the name of une of the bars(RX).
Here is my js code:
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
// google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart(nombre, unidad, tipo, valor, media) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'RX');
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
['Tú', parseInt(valor), valor+' '+unidad],
['Media', parseFloat(media), parseInt(media)+' '+unidad],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,1,2]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, {
// height: 400,
// width: 600,
series: {
0: {
type: 'bars'
},
1: {
type: 'line',
color: 'grey',
lineWidth: 0,
pointSize: 0,
visibleInLegend: false
}
},
vAxis: {
maxValue: 100,
minValue: 0,
}
});
$("#myModalLabel").empty();
$("#myModalLabel").append(tipo+" - "+nombre);
$("#modalChart").modal();
}
Here is the chart that i get:
you can write your drawchart function like this
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "#b87333"],
["Silver", 10.49, "silver"],
["Gold", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
For more https://developers.google.com/chart/interactive/docs/gallery/columnchart#labeling-columns
I have to create a line chart where a few of the points have tooltips or other balloons/captions/texboxes with information about the point. They must always be displayed, not only on mouse over. Basically a google annotation chart, but with the data on the chart.
I tried the code below, which doesn't even show the tooltip as it should. Any thoughts, or should I choose a different technology? Thanks.
google.load('visualization', '1.1', { packages: ['line'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Score');
data.addColumn({type: 'string', role: 'tooltip' });
data.addRows([
[1, 37, 'This score occurred in Texas in 1959.'],
[2, 30, ''],
[3, 25, ''],
]);
var options = {
chart: {
title: 'Important Chart',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
legend: 'none',
axes: {
x: {
0: { side: 'top' }
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, options);
}
You would want to use role:'annotation' instead of role: 'tooltip'. Annotation allows you to display the text without any user interaction. See the documentation on annotationRole for more info.
Working Code: http://jsfiddle.net/wkyg2brg/
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Score');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
[1, 37, 'This score occurred in Texas in 1959.'],
[2, 30, ''],
[3, 25, ''],
]);
var options = {
chart: {
title: 'Important Chart',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
legend: 'none',
axes: {
x: {
0: { side: 'top' }
}
}
};
var chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data,options);
}