I am currently working with Google Charts to visualize data to the user. If there is no Data, the google chart automatically draws the y-Axis from -1 to 1. But in my case, -1 makes no sense, so I want it to show the empty chart from 0 to n (max value doesn't matter, I just don't want negative ones). I already searched for solutions, and the most common answer is, that
viewWindow: {
min: 0
}
should help. But, it doesn't. I guess I just use it the wrong way because it works for so many other users, but I can't figure out, what's wrong. So here is how I tried to avoid negative Y-Values:
function drawChart() {
var data = google.visualization.arrayToDataTable(dataArray);
var options = {
vAxis: { viewWindowMode: "explicit", viewWindow:{ min: 0 }},
chart: {
title: 'Check Diagramm',
subtitle: '#chartTitle',
},
colors: ['#8BC34A', '#F44336']
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
And the result is always:
Thanks in advance for your help :)
Edit:
I also tried
vAxis: {
minValue:0,
viewWindow: {
min: 0
}
}
viewWindow: {min: 0} works, but when using Material charts,
have to convert the options...
google.charts.Bar.convertOptions
see following snippet...
google.charts.load('current', {
callback: function () {
var dataArray = [
['Month', 'Positive Checks', 'Negative Checks'],
['Jan', 0, 0],
['Feb', 0, 0],
['Mar', 0, 0],
['Apr', 0, 0],
['May', 0, 0]
];
var data = google.visualization.arrayToDataTable(dataArray);
// convert options
var options = google.charts.Bar.convertOptions({
height: 600,
width: 800,
vAxis: {
viewWindow: {
min: 0
}
},
chart: {
title: 'Check Diagramm',
subtitle: '#chartTitle',
},
colors: ['#8BC34A', '#F44336']
});
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
},
packages: ['bar']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_material"></div>
Related
I want to dynamically change the startAngle value on my polar chart from JSON 'Wind_direction' value.
The code is below:
$(function() {
$.getJSON('wind_graph.php?callback=?', function(dataWind) {
var direction = Wind_direction;
var polarOptions = {
chart: {
polar: true,
events : {
load : function () {
setInterval(function(){
RefreshDataWind();
}, 1000);
}
}
},
title: {
text: 'Wind Direction'
},
pane: {
startAngle: direction,
},
xAxis: {
tickInterval: 15,
min: 0,
max: 360
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 30,
},
}
};
// The polar chart
$('#graph-1').highcharts(Highcharts.merge(polarOptions, {
yAxis: {
tickInterval: 5,
min: 0,
max: 25,
visible: false
},
series: [{
type: 'line',
name: 'Direction',
data: [
[0, 0],
[direction, 20]
],
}
]
}));
function RefreshDataWind()
{
var chart = $('#graph-1').highcharts();
$.getJSON('wind_graph.php?callback=?', function(dataWind)
{
var direction = Wind_direction;
chart.series[0].setData([[0,0],[direction, 20]]);
});
}
});
});
In the last function, below 'chart.series[0].setData... I was trying to add something like this:
chart.pane.setStartAngle(direction);
but this throws the error: "Cannot read property 'startAngle' of undefined"
Also was trying another one idea:
polarOptions.pane({ startAngle: direction });
but here is error: "polarOptions.pane is not a function".
So I'm stack. Please for help.
You should be able to update all chart options with Chart.update(). Unfortunately, it looks that it does not have any effect on pane - I reported the issue here.
Now you can update the pane in old-fashioned way - by destroying and creating a new chart - http://jsfiddle.net/highcharts/qhY8C/
The other possibility is trying the workaround - set options for pane, remove the pane and update the axis - it should create a new pane with new options.
const xAxis = chart.xAxis[0];
chart.options.pane.startAngle = 45;
Highcharts.erase(chart.panes, xAxis.pane);
chart.yAxis[0].update(null, false);
xAxis.update();
example: http://jsfiddle.net/v8L381Lj/
Updated & Resolved, see below.
I have been working on this for several days, searching and reading many tutorials and I am still stuck. Ultimately I am working on a page that will contain multiple solid gauge charts with data supplied by JSON from an SQLITE3 database. The database is updated every minute and I would like to have the chart data update dynamically, not by refreshing the browser page.
For the purpose of my learning, I have reduced this down to one chart.
All current and future data will be arranged as such:
PHP
[{"name":"s1_id","data":[684172]},
{"name":"s1_time","data":[1483097398000]},
{"name":"s1_probe_id","data":["28-0000071cba01"]},
{"name":"s1_temp_c","data":[22.125]},
{"name":"s1_temp_f","data":[71.825]},
{"name":"s2_id","data":[684171]},
{"name":"s2_time","data":[1483097397000]},
{"name":"s2_probe_id","data":["28-0000071d7153"]},
{"name":"s2_temp_c","data":[22.062]},
{"name":"s2_temp_f","data":[71.7116]}]
This is the current layout of my java:
JS
$(function() {
var options = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '90%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.10, '#2b908f'],//Blue
[0.35, '#55BF3B'],//Green
[0.65, '#DDDF0D'],//Yellow
[0.90, '#DF5353']//Red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 1000,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
},
min: 0,
max: 1000000,
title: {
text: 'Degree C'
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: -10,
borderWidth: 0,
useHTML: true
}
}
},
series: []
};
var gauge1;
$.getJSON('sgt3.php', function(json){
options.chart.renderTo = 'chart1';
options.series.push(json[0]);
gauge1 = new Highcharts.Chart(options);
});
});
I was using information from this post but it leaves off the dynamic update aspect. As I mentioned before, I will have more charts rendering to div ids, all coming from the one JSON array, which is why I have referenced the following link:
Multiple dynamic Highcharts on one page with json
If anyone has an idea how to dynamically update this please let me know. I have tried several setInterval methods but all they seem to do is redraw the chart but no data is updated.
Update:
I spent a while doing some more iterations and resolved before coming back here. I changed each gauge to have their own function such as:
$('#gauge0').highcharts(Highcharts.merge(options, {
yAxis: {
min: 15,
max: 30,
tickPositions: [15, 20, 25, 30],
title: {
text: 'Table'
}
},
credits: {
enabled: false
},
series: [{
data: [30],
dataLabels: {
y: 20,
format: '<div style="text-align:center"><span style="font-size:48px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.3f}</span><br/>' +
'<span style="font-size:12px;color:silver">Degree C</span></div>'
},
tooltip: {
valueSuffix: 'Tooltip 1'
}
}]
}));
Then got the setInterval to work by assigning to each gauge respectively. I have added a lot more info than just the two I referenced but each var and setData can be added respectively.
// Bring life to the dials
setInterval(function() {
$.ajax({
url: 'data_temps.php',
success: function(json) {
var chart0 = $('#gauge0').highcharts();
var chart1 = $('#gauge1').highcharts();
// add the point
chart0.series[0].setData(json[3]['data'],true);
chart1.series[0].setData(json[8]['data'],true);
},
cache: false
})
}, 1000)
Hopefully this can help someone in the future. This may not be the most efficient way but its working great right now. Thanks again everyone for your suggestions.
You may try something like this:
change:
var gauge1;
$.getJSON('sgt3.php', function(json){
options.chart.renderTo = 'chart1';
options.series.push(json[0]);
gauge1 = new Highcharts.Chart(options);
});
to:
options.chart.renderTo = 'chart1';
var gauge1 = new Highcharts.Chart(options);
$.getJSON('sgt3.php', function(json){
gauge1.series[0].points.length = 0;
gauge1.series[0].points.push(json[0]);
});
That is, updating the existing series on a chart instead of re-creating it.
As I've mentioned in the comment before, highcharts provide an example of dynamically updated gauge:
http://jsfiddle.net/gh/get/jquery/3.1.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/
My Chart has a datetime value and two number values (positive and negative).
The above image shows the results of drawing one bar, datetime being current date, the problem is, the bar covers 1990 to 2050, when it should only be covering the current month.
If I draw 2 bars, one for last month, and one for current month, everything is drawn properly.
I'm assuming GoogleCharts needs at least 2 dates for some reason. Does anyone have any idea how to fix this, or give some direction.
Thanks in advance,
Edit to ADD:
The Chart that I am using:
google.charts.load('current', {packages: ['corechart', 'controls']});
The single bar that I am drawing comes from this data store in historyChart:
[["2016-10-01T00:00:00+00:00", 5000.0, 0]]
I am inserting this data to the chart in this manner:
data.addColumn('datetime', 'Chart Filter');
data.addColumn('number');
data.addColumn('number');
data.addRows(historyChart);
The Chart wrapper and options are as followed:
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'programmatic_chart_div',
'options': {
displayExactValues:false,
vAxis: {
format: '$#,###', //add $sign in virtical axis
viewWindowMode: 'maximized',
},
hAxis:{
format: 'MMM-yyyy',
},
width: 900,
height: 450,
chartArea: {
'backgroundColor': {
'fill': '#F4F4F4',
'opacity': 100
},
top:50,
left:85,
width: 1000
},
title: "{{ member.username }}'s chart", //set user name as chart's title
isStacked:"true",
bar:{groupWidth: "95%"},
colors: ['#7FFF00', '#e6693e'],
}
});
// Create and draw the visualization.
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);
adding option for hAxis.ticks seems to help...
see following working snippet...
google.charts.load('43', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Chart Filter');
data.addColumn('number');
data.addColumn('number');
data.addRows([
[new Date("10/01/2016"), 5000.0, 0]
]);
var programmaticChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'programmatic_chart_div',
dataTable: data,
options: {
displayExactValues: false,
vAxis: {
format: '$#,###',
viewWindowMode: 'maximized'
},
hAxis:{
format: 'MMM-yyyy',
ticks: [new Date("10/01/2016")]
},
width: 900,
height: 450,
chartArea: {
backgroundColor: {
fill: '#f4f4f4',
opacity: 100
},
top: 50,
left: 85,
width: 1000
},
title: '{{ member.username }}\'s chart',
isStacked: 'true',
bar:{groupWidth: '95%'},
colors: ['#7fff00', '#e6693e']
}
});
programmaticChart.draw();
//dashboard.bind(programmaticSlider, programmaticChart);
//dashboard.draw(data);
},
packages: ['corechart', 'controls']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="programmatic_chart_div"></div>
I tried multiple solutions given out from
How to set Axis step in Google Chart?, Trying to set y axis to 0 in google charts, and several other posts that I have looked over without any luck. Does anyone have an idea of what can be done in order to set the y axis to a starting point of 0? I can provide more information if need be. Also a side question, is it possible to bring a line to the front when clicked on. For example when you click on the current trend line, it bolds but the data points do not appear for them.
<div id="thelinechart" style="width: 1000px; height: 550px"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();data.addColumn('string','Year');
data.addColumn('number','Current Trend');
data.addColumn('number','2015 Projection');
data.addColumn('number','2016 Projection');
data.addColumn('number','2017 Projection');
data.addColumn('number','2018 Projection');
data.addRows([
['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450]
]);
var options = {
chart: {
title: 'Capacity',
subtitle: 'in weight'
},
width: 850,
height: 450,
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
//max: 8000,
min: 0,
},
gridlines: {
count: 18, //set kind of step (max-min)/count
}
}
};
var chart = new google.charts.Line(document.getElementById('thelinechart'));
chart.draw(data, options);
}
</script>
I have a jsfiddle link where I have my code.
https://jsfiddle.net/abufr36y/
Need to convert options for Material Charts, depending on the package...
google.charts.Line.convertOptions(options)
See following example...
google.charts.load('current', {
callback: drawChart,
packages: ['line']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string','Year');
data.addColumn('number','Current Trend');
data.addColumn('number','2015 Projection');
data.addColumn('number','2016 Projection');
data.addColumn('number','2017 Projection');
data.addColumn('number','2018 Projection');
data.addRows([
['2015',250,250,null,null,null],['2016',200,300,200,null,null],['2017',200,310,230,200,null],['2018',290,340,320,280,290],['2019',null,370,350,360,290],['2020',null,null,430,470,390],['2021',null,null,null,520,440],['2022',null,null,null,null,450]
]);
var options = {
chart: {
title: 'Capacity',
subtitle: 'in weight'
},
width: 850,
height: 450,
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
//max: 8000,
min: 0,
},
gridlines: {
count: 18, //set kind of step (max-min)/count
}
}
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 2, 3, 4, 5, 1]);
var chart = new google.charts.Line(document.getElementById('thelinechart'));
// convert options for Material Charts, use view vs. data
chart.draw(view, google.charts.Line.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="thelinechart"></div>
I am using google chart which is working absolutely fine except one thing the issue is when I select custom date filter and choose only single date from it then it will show only 1 record with little dot which is also fine no issue with that but its y axis shows repetitive values in it.
Please check example :
http://awesomescreenshot.com/0f757w8k3a
it shows 0, 1, 1, 2, 2
it should show 0, 1, 2, 3, 4 or just 0, 1, 2
var options = {
vAxis: {
format: '#',
minValue: 0,
gridlines: {
color: 'transparent'
},
viewWindowMode: "explicit",
viewWindow:{ min: 0 }
},
hAxis: { textPosition: 'none' },
legend: { position: 'none' },
colors:[{color:'#A8D1FF', darker:'#97B9D8'}]
};
var chart = new google.visualization.AreaChart(document.getElementById('PostChart'));
chart.draw(PostChartData, options);
That may be cause of small range of values for Y axis. Try using Ticks for vAxis commonly referred as vAxis.ticks
vAxis: { ticks: [5,10,15,20] } //array
vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] } // A valid value as V
vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] } // Dates
Click Here for Ref.
Edit1: In case your record values belongs to smaller range and and you have set the Max Value of vAxis to a higher value, It can also result in Repeated values in vAxis.