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,
....
}
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.
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
I am having a strange issue in jqplot bar chart. THe bar chart label in last bar is displaying sometimes and disappearing other times. I have added a screen shot and my script.!
Here is the script i have used.
plot1 = $.jqplot('chart1', [s1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesColors:<?php echo json_encode($barColor ); ?>,
<?php if(isset($_POST['additionalSubmit'])){ ?>
negativeSeriesColors: ["#792A86"],
<?php } else { ?>
negativeSeriesColors: <?php echo json_encode($barColornegative ); ?>,
<?php } ?>
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
barWidth: 30,
varyBarColor :true
},
pointLabels: {
show: true,
formatString :"€ %'s",
escapeHTML: false
}
},
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
name: 'zeroline',
y: 0,
lineWidth: 2,
xOffset: 0,
color: '#BBCCDD',
shadow: false
}}
]
},
axes: {
xaxis: {
autoscale:true,
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '8pt',
fontWeight: 'normal',
angle:-20,
},
borderColor: "#BBCCDD",
borderWidth:5
},
yaxis: {
autoscale:true,
tickOptions:{ prefix: '€' , formatString: "%'d",} ,
borderColor: "#BBCCDD",
borderWidth:5,
label: 'resultant in EURO',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
legend: {
show: true,
placement: 'outside',
noColumns: 1
},
series: [
{
fill: true,
label: '<?php echo $_POST['scenario']; ?>'
}
],
highlighter: { show: false }
});
Thanks in advance.
The labels will not show when they 'hit' the edges. To avoid this detection, set the edgeTolerance for your pointLabels like this:
pointLabels: {
show: true,
formatString :"€ %'s",
escapeHTML: false,
edgeTolerance: -100
}
I am using the Highcharts JavaScript library to visualize some float values, which i feed into the js code via php. As you can see in the following picture, on each point's mouseover are now displayed the two values that correspond to the axes values and the text "text: undefined".
My question is: Is there a way to display a different text for each point of the scatter plot? I have a text that corresponds to each point, but I haven't found a way to display it.
My JavaScript/php code is:
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'},
title: {
text: 'Average 24hrs Sentiment for <?php echo $channel?> by Gender '
},
subtitle: {
text: 'Source: '
},
xAxis: {
title: {
enabled: true,
text: 'Hours ([0-24h].[0-60mins])'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Sentiment (N. Bayes) %'
}
},
tooltip: {
formatter: function() {
return ''+
this.x +' hrs, '+ this.y +' sentiment, text: ';
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 24,
y: 1,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [
<?php
for($j=0;$j<$i1;$j++)
{
if($females[$j]['Hour'][0] == "0")
{
echo '['.$females[$j]['Hour'][1].'.'.$females[$j]['Min'].','.$females[$j]['Sent'].'"]';
}
else
echo '['.$females[$j]['Hour'].'.'.$females[$j]['Min'].','.$females[$j]['Sent'].'"]';
if(($j+1)!=$i1)
{
echo ",";
}
}
?>
]},
{
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [
<?php
for($j=0;$j<$i2;$j++)
{
if($males[$j]['Hour'][0] == "0")
{
echo '['.$males[$j]['Hour'][1].'.'.$males[$j]['Min'].','.$males[$j]['Sent'].',"'.$males[$j]['Text'].'"]';
}
else
echo '['.$males[$j]['Hour'].'.'.$males[$j]['Min'].','.$males[$j]['Sent'].',"'.$males[$j]['Text'].'"]';
if(($j+1)!=$i2)
{
echo ",";
}
}
?>
]}]
});
});
});
Thank you.
If the text is unique to each point, you can pass more than the x and y as values. In the following example I pass three other values: locked, unlocked, and potential. Then to access them in the tooltip formatter, do so by using the this.point.locked
this.x +' hrs, '+ this.y +' sentiment, text: ';
Try to set the text in this code line,
just in order to check whether my suggestion will solve your problem,
try :
this.x +' hrs, '+ this.y +' sentiment, text: '+this.x;
And then check whether (this.x) value appears insted of "undefined" .