How to avoid the negative values from google chart, I tried viewWindow: { min: 0,} in my Y axis, but still it showing negative values only.
please help some one please. Thanks in advance
<div class="timeline-item">
<div id="top_x_div" style="width: 100%; height: 300px;"></div>
</div>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.arrayToDataTable([
['Courses', 'Students'],
["Electronics", 2 ],
]);
var options = {
legend: { position: 'none' },
isStacked: true,
colors: ['green'],
bars: 'vertical', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'bottom', label: 'Percentage'} // Top x-axis.
}
},
axes: {
y: {
0: { side: 'bottom', label: 'Students'}, // Top x-axis.
/* viewWindow: {
min: 0,
},*/
}
},
vAxis: {
viewWindow: {
min: 0
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
You need to set the viewWindow on the vAxis option.
vAxis: {
viewWindow: {
min: 0
}
}
Source
Related
Let's say I want to mark 8am and 9am points as Red color and the others as green. How do I do it?
`
echo '
<div style="width:800px" >
<canvas id="myChart"></canvas>
</div>
<script>
var xValues = ["'.$time.'"];
var yValues = ['.$avgpercent.'];
// var zValues = [22];
var barColors = ["red"];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
label: "AvgPercent",
backgroundColor: barColors,
data: yValues,
borderColor: "rgb(75, 192, 192)",
backgroundColor:"lightgreen"
}]
},
options: {
responsive: true,
legend: {display: true},
plugins: {
title: {
display: true,
text: "'.$cpuname.' 24Hrs Report"
}
}
}
});
</script>';
`
Above is the code I've used. $avgPercent has the percentage data(yvalues) and $time is the xvalues
pointBackgroundColor: function(context) {
var index = context.dataIndex;
var value = context.dataset.data[index];
return value < 0 ? 'red' : // draw negative values in red
index % 2 ? 'blue' : // else, alternate values in blue and green
'green';
}
I want to show values on graphs. i search alot but could not find my solution.
Here is the code below:
<script>
var ctx = document.getElementById("barChart");
ctx.height = 100;
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: <?php echo json_encode($Division); ?>,
datasets: [{
label: 'Target',
data: <?php echo json_encode($TARGET_QTY); ?>,
//backgroundColor: "rgba(255, 159, 64, 0.2)",
backgroundColor: "rgb(231, 123, 126)",
borderColor: "rgb(219, 219, 219)",
borderWidth: 1
},
{
label: 'Actual',
data: <?php echo json_encode($DISPATCH_QTY); ?>,
backgroundColor: "rgb(0, 191, 255)",
borderColor: "rgb(252, 252, 252)",
borderWidth: 1
}
]
},
options: {
responsive: true,
tooltips: {
"enabled": false
},
scales: {
yAxes: [{
gridLines: {
display:false,
},
ticks: {
beginAtZero:true
}
}]
},
title: {
display: true,
// position:"bottom",
text: 'Target vs Actual Dispatch'
},
hover: {
// Overrides the global setting
mode: 'label'
},
animation: {
duration: 1,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset, i)
{
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
/*legend: {
display: true,
// position : "bottom",
labels: {
fontColor: 'rgb(0, 0, 0)'
}
}*/
}
});
</script>
<div class="row">
<div class="col-md-12">
<div class="chart">
<canvas id="barChart" style="position: relative; height: 300px;"></canvas>
</div>
</div>
</div>
I search alot but could not show values in the bar graph. In this code value will be shown on the top of the graph but could not show on the bar. i want to show value on the bars of graph. either its a bar chart or pie chart. i use chart.js library. Please help me to get rid of this situation. Thanks in Advance.
I'm working on a dual Y-axis linechart that is to have both height and weight on the Y-axes with the date displaying on the X-axis:
I'm pulling the data from my MYSQL database and encoding it into json and the passing it to my function that draws the chart as shown:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Height');
data.addColumn('number', 'Weight');
data.addRows([
<?php
$chart_info = $db->prepare("SELECT `height`, `weight`, `date_captured` FROM `child_results_capture` ");
$chart_info->execute();
$result = $chart_info->fetchAll(PDO::FETCH_ASSOC);
$chart_data = '';
foreach($result as $value)
{
$chart_data.="['".$value['date_captured']."',".$value['height'].",".$value['weight']."],";
// var_dump($chart_data);exit;
// echo $chart_data;
}
echo $chart_data;
?>
]);
var options = {
title: 'Height-Weight graph',
width: 900,
height: 500,
series: {
0: {axis: 'Height'},
1: {axis: 'Weight'}
},
axes: {
y: {
Height: {label: 'Height (cm)'},
Weight: {label: 'Weight (kg)'}
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('graph_chart'));
chart.draw(data, options);
}
</script>
<div id="graph_chart"></div>
The Json returned from my php bit looks like this:
['2016-07-27',51,3.4],['2016-08-03',52,4],['2016-08-10',53,5],['2016-08-17',54,6],['2016-08-24',55,7],['2016-08-31',56,8],
And my output looks like this:
As shown above, I only get one Y-axis(for the height) and my chart axes are not labelled with the corresponding names
Will appreciate being pointed in the right direction
the specific configuration options used in the question to build the Dual-Y Chart
are for Material charts only --> google.charts.Line
var optionsMatl = {
title: 'Height-Weight graph',
width: 900,
height: 500,
series: {
0: {axis: 'Height'},
1: {axis: 'Weight'}
},
axes: {
y: {
Height: {label: 'Height (cm)'},
Weight: {label: 'Weight (kg)'}
}
}
};
a different set of options is needed to build a Dual-Y Chart
in a Classic chart --> google.visualization.LineChart
var optionsCore = {
title: 'Height-Weight graph',
width: 900,
height: 500,
series: {
1: {
targetAxisIndex: 1
}
},
vAxes: {
0: {
title: 'Height (cm)'
},
1: {
title: 'Weight (kg)'
}
},
theme: 'material'
};
from the documentation for Dual-Y Charts...
In the Material code ..., the axes and series options together specify the dual-Y appearance of the chart. The series option specifies which axis to use for each. The axes option then makes this chart a dual-Y chart.
In the Classic code, this differs slightly. Rather than the axes option, you will use the vAxes option (or hAxes on horizontally oriented charts). Also, instead of using names, you will use the index numbers to coordinate a series with an axis using the targetAxisIndex option.
see following working snippet, which draw both...
google.charts.load('current', {packages:['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Height');
data.addColumn('number', 'Weight')
data.addRows([
['2016-07-27',51,3.4],
['2016-08-03',52,4],
['2016-08-10',53,5],
['2016-08-17',54,6],
['2016-08-24',55,7],
['2016-08-31',56,8]
]);
var optionsMatl = {
title: 'Height-Weight graph',
width: 900,
height: 500,
series: {
0: {axis: 'Height'},
1: {axis: 'Weight'}
},
axes: {
y: {
Height: {label: 'Height (cm)'},
Weight: {label: 'Weight (kg)'}
}
}
};
var chartMatl = new google.charts.Line(document.getElementById('chart_div_matl'));
chartMatl.draw(data, google.charts.Line.convertOptions(optionsMatl));
var optionsCore = {
title: 'Height-Weight graph',
width: 900,
height: 500,
legend: {
position: 'top',
alignment: 'end'
},
series: {
1: {
targetAxisIndex: 1
}
},
vAxes: {
0: {
title: 'Height (cm)',
},
1: {
title: 'Weight (kg)'
}
},
theme: 'material'
};
var chartCore = new google.visualization.LineChart(document.getElementById('chart_div_core'));
chartCore.draw(data, optionsCore);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Material Chart</div>
<div id="chart_div_matl"></div>
<div>Core Chart</div>
<div id="chart_div_core"></div>
I'm trying to do a realtime Bar Chart. On left (Y axis) i have clients Name
and on bottom (X axis) i have a number (a count from mysql).
Simply i cant understand why wont go the redraw. I've been trying solving the problem alone and searching on google and here last 2 days without any success.
Here is the code:
`
<script>
var rawData = [<?php echo getDataLog(); ?>];
var dataSet = [{ label: "Numero di Allarmi", data: rawData, color: "#E8E800" }];
var ticks = [<?php echo getDataLogName(); ?>];
var options = {
series: {
bars: {
show: true
}
},
bars: {
align: "center",
barWidth: 0.5,
horizontal: true,
fillColor: { colors: [{ opacity: 0.5 }, { opacity: 1}] },
lineWidth: 1
},
xaxis: {
axisLabel: "Allarmi",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10,
max: 2000,
tickColor: "#5E5E5E",
color: "black"
},
yaxis: {
axisLabel: "Clienti",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
tickColor: "#5E5E5E",
ticks: ticks,
color: "black"
},
legend: {
noColumns: 0,
labelBoxBorderColor: "#858585",
position: "ne"
},
grid: {
hoverable: true,
borderWidth: 2,
backgroundColor: { colors: ["#171717", "#4F4F4F"] }
}
};
function updateGraph(){
var rawData = [<?php echo getDataLog(); ?>];
var dataSet = [{ label: "Numero di Allarmi", data: rawData, color: "#E8E800" }];
var ticks = [<?php echo getDataLogName(); ?>];
$.plot($("#flot-placeholder"), dataSet, options);
$("#flot-placeholder").UseTooltip();
}
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) ||
(previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var color = item.series.color;
//alert(color)
//console.log(item.series.xaxis.ticks[x].label);
showTooltip(item.pageX,
item.pageY,
color,
"<strong>" + item.series.label + "</strong><br>" + item.series.yaxis.ticks[y].label +
" : <strong>" +x+ "</strong> Allarmi");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y - 10,
left: x + 10,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
setInterval(function(){
updateGraph();
console.log("a");
},1000)
</script>`
I really give up on try to understand why wont refresh the graph
I try to use jqplot to plot a bar graph and I found a problem about first bar in graph, it isn't display point label. How to solve this problem? Thank you for help and suggestion.
Lohkaeo
I'm sorry, I forgot.
<script type="text/javascript">
$(document).ready(function() {
var s1 = [32100,0,0,990000,0,0,0,0,0,0,0,0];
var s2 = [36000,0,0,1800,0,4980,0,0,0,0,0,0];
var s3 = [0,0,0,0,0,0,0,0,0,0,0,0];
var ticks = ['1 2013','2 2013','3 2013','4 2013','5 2013','6 2013','7 2013','8 2013','9 2013','10 2013','11 2013','12 2013'];
$('#show-graph').css('height', '699px').jqplot([s1, s2, s3], {
title:'รายจ่าย',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barWidth: 20,
barMargin: 10
},
pointLabels: {
show: true,
formatString: "%#.2f",
hideZeros: true
}
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30,
labelPosition: 'middle'
},
ticks: ticks
},
yaxis: {
min: 0
}
},
legend: {
show: true,
location: 'ne',
placement: 'insideGrid'
},
series:[
{label: 'beverage'},
{label: 'equipment'},
{label: 'another'}
]
});
});
This is because the leftmost bar is too near to the edge so the jqPlot will not render that. Try to increase the width.
$jqplot('show-graph', [s1, s2, s3], {
title: 'xxxx',
width: 1000,
....
}