i have been googling a lot of time, but did not find any working solution, so decided to ask a question. Why i can't see my firs data_row element 99.00 date?
heres the code how i init all script:
var colors = [ '#F1A504', '#80CE61', '#0BA3E4', '#7E4CCF' ];
var gChart = {
table_data : {
1: 'Reguliavimas "į viršų" kiekis',
2: 'Reguliavimas "žemyn" kiekis',
3: 'Reguliavimas "į viršų" kaina',
4: 'Reguliavimas "žemyn" kaina'
},
data_row : [
[ new Date( 2013, 3, 17, 0, 00, 00 ), 0.00, 99.00, 0.00, 40.00],
[new Date( 2013, 3, 17, 1, 00, 00 ), 0.00, 11.00, 0.00, 40.00],
[new Date( 2013, 3, 17, 2, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 3, 00, 00 ), 0.00, 27.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 4, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 5, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 6, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 7, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 8, 00, 00 ), 0.00, 42.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 9, 00, 00 ), 0.00, 30.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 10, 00, 00 ), 0.00, 20.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 11, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 12, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 13, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 14, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 15, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 16, 00, 00 ), 0.00, 46.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 17, 00, 00 ), 0.00, 90.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 18, 00, 00 ), 0.00, 90.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 19, 00, 00 ), 0.00, 108.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 20, 00, 00 ), 0.00, 75.00, 0.00, 38.00],
[new Date( 2013, 3, 17, 21, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 22, 00, 00 ), 0.00, 0.00, 0.00, 0.00],
[new Date( 2013, 3, 17, 23, 00, 00 ), 0.00, 0.00, 0.00, 0.00 ]
],
lang : 'lt',
maxV : 108.00,
minV : 0.00,
chartType: 1,
dataGroup: 'H'
};
function drawChart( id, table_data, data_row, lang, chartType, colors ){
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('datetime', 'Time');
for ( var i = 1; i <= objCount( table_data ); i++ ) {
dataTable.addColumn( 'number', table_data[i] );
}
var dataView = new google.visualization.DataView( dataTable );
var options3 = {
width: 670,
height: 380,
fontSize: 11,
colors: colors,
backgroundColor: 'transparent',
legend: 'none',
chartArea: {
top: 5,
left: 50,
width: 647,
height: 351
},
hAxis: {
textStyle: { color: "#9a9fa3" },
baselineColor: "#b1b3b6",
gridlines: {
color: "transparent",
count: 28
},
maxAlternation: 26,
format: gChart.dataGroup
},
vAxis: {
baselineColor: "#b1b3b6",
gridlines: {
color: "#eff0f1",
count: 8
},
textStyle: { color: "#9a9fa3" }
}
};
var chart = new google.visualization.ColumnChart( document.getElementById( id ) );
dataTable.addRows( data_row );
chart.draw( dataView, options3 );
}
/* LOADING GCHARTS */
google.load( "visualization", "1", { packages:["corechart"], language: gChart.lang } );
google.setOnLoadCallback(function() {
drawChart( 'chart', gChart.table_data, gChart.data_row, gChart.lang, gChart.chartType, colors );
});
Please see my answer at Google Visualization Chart Not Showing First Column
Essentially, you need your DataView to format the first column of the table as a string.
After:
var dataView = new google.visualization.DataView( dataTable );
Insert:
dataView.setColumns([{calc: function(data, row) { return data.getFormattedValue(row, 0); }, type:'string'}, 1, 2, 3, 4]);
Related
I would like to format the Y Axis of my google Dual Y Axis Line Chart.
Here the code I'm using:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
(...snip data...)
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Pressure'},
Daylight: {label: 'Temps (Celsius)'}
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
var classicChart = new google.visualization.LineChart(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
drawMaterialChart();
}
</script>
</head>
<body>
<br><br>
<div id="chart_div"></div>
</body>
</html>
I would like that the Y Axis is able to display the data not rounded (now it shows only 1K value and not with decimal) on the Y axis (for bot Y axies) as well on the tooltip message.
The tooltip message shows on the pressure values 1K always and on the temperature values, the values without decimal...
Could someone help me?
Thanks!
Simon
PS: The data is created dynamically from a php script, but thats not important now :)
use NumberFormat to format the data
this will set the format of the tooltip...
// create formatter
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.0'});
// format column 1 - Pressure
formatNumber.format(data, 1);
// format column 2 - Temperature
formatNumber.format(data, 2);
to format both y-axis', add this to materialOptions...
vAxis: {
format: '#,##0.0'
}
also recommend using google.charts.Line.convertOptions with Material charts
see following working snippet...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var formatPattern = '#,##0.0';
var formatNumber = new google.visualization.NumberFormat({pattern: formatPattern});
formatNumber.format(data, 1);
formatNumber.format(data, 2);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
y: {
Temps: {
label: 'Pressure'
},
Daylight: {
label: 'Temps (Celsius)'
}
}
},
vAxis: {
format: formatPattern
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
So as seen in the code snippet below, I'm just trying to create a chart/control combination dashboard via Google Charts and I'm having some difficulties with datetime fields, despite following the reference material on that.
My areas of confusion are as follows:
1. Why do the dates shown on the chart appear to be off by one month? I've entered dates for August & September, yet September & October are showing up on the chart.
2. Why does the chart displayed for the ChartRangeFilter appear to jump back to older dates (around the October 2 mark)?
google.charts.load('current', {
packages: ['corechart', 'controls']
});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
[{
"type": "datetime",
"label": "date"
}, {
"type": "number",
"label": "presence"
}],
["Date(2017, 08, 29, 12, 17, 25)", 1],
["Date(2017, 08, 29, 15, 06, 39)", 0],
["Date(2017, 08, 29, 17, 28, 27)", 1],
["Date(2017, 08, 30, 09, 14, 33)", 0],
["Date(2017, 08, 30, 13, 17, 28)", 1],
["Date(2017, 08, 30, 14, 03, 52)", 0],
["Date(2017, 08, 30, 17, 31, 12)", 1],
["Date(2017, 08, 30, 22, 14, 45)", 0],
["Date(2017, 08, 30, 22, 15, 48)", 1],
["Date(2017, 08, 31, 08, 41, 30)", 0],
["Date(2017, 08, 31, 13, 22, 06)", 1],
["Date(2017, 08, 31, 13, 33, 33)", 0],
["Date(2017, 08, 31, 15, 23, 41)", 1],
["Date(2017, 08, 31, 15, 48, 11)", 0],
["Date(2017, 08, 31, 22, 15, 45)", 1],
["Date(2017, 09, 01, 09, 18, 40)", 0],
["Date(2017, 09, 01, 19, 29, 50)", 1],
["Date(2017, 09, 02, 11, 24, 07)", 0],
["Date(2017, 09, 02, 14, 13, 04)", 1],
["Date(2017, 09, 03, 09, 48, 48)", 0],
["Date(2017, 09, 03, 13, 27, 42)", 1],
["Date(2017, 09, 03, 13, 51, 46)", 0],
["Date(2017, 09, 03, 15, 44, 59)", 1],
["Date(2017, 09, 04, 10, 02, 20)", 0]
]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var chart_options = {
"legend": { "position": "none" },
"vAxis": {
"ticks": [{
"f": "Not Present",
"v": 0
}, {
"f": "Present",
"v": 1
}],
"maxValue": 1,
"minValue": 0
},
"title": "Chart"
};
var chart = new google.visualization.ChartWrapper({
'chartType': 'SteppedAreaChart',
'containerId': 'chart',
'options': chart_options
});
var control_options = {
"filterColumnLabel": "date"
};
var control = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': control_options,
});
dashboard.bind(control, chart);
dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart" style="width: 100%; height: 100%"></div>
<div id="control" style="width: 100%; height: 100%"></div>
</div>
The Following Chart suppose to show the September month but instead its showing the October, what's wrong here. in the date series its clearly showing the month 9 which is September but its showing October. ? Thanks in Advance.
<script>
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Wahab Jaan Chart'
},
yAxis: {
title: {
text: 'Profi / Loss'
},
tickInterval: 5
},
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2016, 09, 13), 1110],
[Date.UTC(2016, 09, 29), 1100.02],
[Date.UTC(2016, 09, 29), 4110.02],
[Date.UTC(2016, 09, 29), 8304.02],
[Date.UTC(2016, 09, 30), 8314.36],
[Date.UTC(2016, 09, 30), 8324.64],
[Date.UTC(2016, 09, 30), 8334.66],
[Date.UTC(2016, 09, 30), 8324.38],
[Date.UTC(2016, 09, 30), 8334.3],
[Date.UTC(2016, 09, 30), 8344.18],
[Date.UTC(2016, 09, 30), 7334.18],
]
}]
});
In Javascript Date, month 0 is Jannuary, 1 is February, etc...
So month 9 is indeed October.
The configuration has been pre-tested on Fiddler and it's all working, but somehow it stopped working when i implemented it in Android's webview.
In my web interface class, I have a method which returns the data, and so I called the method in the HTML file in the script section as follow
var glucose = Android.getGlucoseData();
The debug console shows the following output of the glucose var (please don't mind the fake data)
[
[Date.UTC(2016, 4, 02, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 03, 00,
00 ,00), 0.0],[Date.UTC(2016, 4, 04, 00, 00 ,00), 0.0],[Date.UTC(2016,
4, 05, 19, 16, 00), 8.65999984741211],[Date.UTC(2016, 4, 06, 16, 55,
00), 9.65999984741211],[Date.UTC(2016, 4, 06, 17, 19, 00),
3.6600000858306885],[Date.UTC(2016, 4, 06, 17, 30, 00), 9.65999984741211],[Date.UTC(2016, 4, 07, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 08, 00, 00 ,00), 0.0]
]
And when I passed it into the chart
series: [{
name: 'Glucose',
data: glucose,
marker: {
enabled: true
},
tooltip: {
valueSuffix: ' mmol/L'
}
}...
It does not render the data at all. HOWEVER if i do the following, which is essentially the same as the above, it WORKS.
var glucose = [
[Date.UTC(2016, 4, 02, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 03, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 04, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 05, 19, 16, 00), 8.65999984741211],[Date.UTC(2016, 4, 06, 16, 55, 00), 9.65999984741211],[Date.UTC(2016, 4, 06, 17, 19, 00), 3.6600000858306885],[Date.UTC(2016, 4, 06, 17, 30, 00), 9.65999984741211],[Date.UTC(2016, 4, 07, 00, 00 ,00), 0.0],[Date.UTC(2016, 4, 08, 00, 00 ,00), 0.0]
]
From the above, you can realise i'm just literally hardcoding the data produced by Android.getGlucoseData(); into the variable.
May I know what did I do wrong?
The issue can be caused by using Date.UTC() in JSON, which is not evaluated when you load data. In other words, you cannot use functiosn in JSON. At the beginning, try to hardcode the timestamps (onyl for testing) and check if chart is printed or not.
I´m trying to update my highchart serie appending new data.
My series look like:
series: [{
name: 'Serie1',
data:[
{
x: 0,
low: Date.UTC(2013, 07, 03, 0, 00, 00),
high: Date.UTC(2013, 07, 03, 4, 0, 0),
cliente:[{nombre:'Pepe',
Partida:'11111',
Bandejas:'35'},
{nombre:'Pepe1',
Partida:'222',
Bandejas:'50'}]
},
{
x: 0,
low: Date.UTC(2013, 07, 03, 5, 0, 0),
high: Date.UTC(2013, 07, 03, 9, 0, 0)
},
{
x: 0,
low: Date.UTC(2013, 07, 03, 18, 0, 0),
high: Date.UTC(2013, 07, 03, 24, 0, 0)
}
]
},
{
name: 'Serie2',
data:[
{
x: 2,
low: Date.UTC(2013, 07, 03, 4, 0, 0),
high: Date.UTC(2013, 07, 03, 10, 0, 0)
},
{
x: 2,
low: Date.UTC(2013, 07, 03, 18, 0, 0),
high: Date.UTC(2013, 07, 03, 24, 0, 0)
},
{
x: 2,
low: Date.UTC(2013, 07, 03, 0, 0, 0),
high: Date.UTC(2013, 07, 03, 2, 0, 0)
},
{
x: 2,
low: Date.UTC(2013, 07, 03, 11, 0, 0),
high: Date.UTC(2013, 07, 03, 18, 0, 0)
}
]
}
]
When I click a button I want to append new data inside "Serie 1".
I´ve tried chart.series[pos].setData(newdata); and it works, but delete all the previous data.
I´ve also tried using chart.series[pos-1].data.push(newdata); but it doesn´t work.
Any solution?
You can use addPoint function which allows to add new data.