ChartJS Line Chart Multi Color - php

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';
}

Related

How to show values on pie or bar graph chart in php using chart.js

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.

Line Chart using Chart js with time data

I am creating a line chart using chartJs by passing date at X-Axis and time (mm:ss) at Y-Axis. I am not sure how to use chartJs with time values.I tried different solutions from stack but none works in my case.
Here is json file
{"label":["08-Aug-2019","11-Aug-2019","22-Aug-2019","25-Aug-2019"],"time":["1:08","1:44","2:27","1:02"],"chart_data":"{\"label\":[\"08-Aug-2019\",\"11-Aug-2019\",\"22-Aug-2019\",\"25-Aug-2019\"],\"time\":[\"1:08\",\"1:44\",\"2:27\",\"1:02\"]}"}
Here is what i am trying to code
<div id="time_chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script>
let sData = JSON.parse('<?php echo $chart_data; ?>');
let time_ctx = $("#time-chart");
//Line Chart
var time_data = {
labels: sData.label,
datasets: [
{
label: sData.label,
data: sData.time
}
]
};
//options line chart
var time_options = {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
scales: {
yAxes: [{
type: 'time',
time: {
parser: 'm:s',
unit: 'minute',
unitStepSize: 2,
min: '0:0',
max: '30:00',
displayFormats: {
'seconds': 'm.s'
}
},
ticks: {
callback: function(value, index, values) {
//Ticks reverse does not work with time axes so we have to revert in this callback
if (values[values.length - index] != undefined) {
return moment(values[values.length - index].value).format('m.s');
}
}
}
}]
}
};
var chart2 = new Chart(time_ctx, {
type: "line",
data: time_data,
options: time_options
});
</script>
This is what I am getting with this code:

Although I didn't manage to use a time axis for both the x- and y-axes, I managed to create a workaround with a timed x-axis and a linear y-axis.
I parse your time and return the time in seconds (integer). I use this value to display your time and change the format back to mm:ss.
I hope this is what you wanted. I'm not sure you want the axes this way (because in your code you use the y-axis as type "time").
PS: My first post, please feel free to tell me what I can improve.
JSFiddle: https://jsfiddle.net/5837nmyo/
JSBin: https://jsbin.com/yadixolica/1/edit?html,js,output
let sData = {}
sData.label = ["08-Aug-2019","11-Aug-2019","22-Aug-2019","25-Aug-2019"]
sData.time = ["1:08","1:44","2:27","1:02"]
let chartData = {}
chartData.label = sData.label
chartData.time = parseTimeToSeconds(sData.time)
function parseTimeToSeconds(times){
let regex = /(\d*):(\d{2})/gm
let parsedTime = []
for (let x = 0; x < times.length; x++) {
let match = regex.exec(times)
parsedTime.push(parseInt(match[1])*60 + parseInt(match[2]))
}
return parsedTime
}
let time_ctx = document.getElementById('time_chart');
let time_data = {
labels: chartData.label,
datasets: [{
label: chartData.label,
data: chartData.time
}]
};
let time_options = {
responsive: true,
title: {
display: false
},
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem, data){
let value = parseInt(tooltipItem.value)
if (value%60 < 10)
return Math.floor(value/60) + ":" + 0 + value%60
else
return Math.floor(value/60) + ":" + value%60
}
}
},
scales: {
xAxes: [{
type: 'time'
}],
yAxes: [{
ticks: {
min: 0,
max: 1800,
stepSize: 120,
callback: function(value, index, values) {
if (value%60 < 10)
return Math.floor(value/60) + ":" + 0 + value%60
else
return Math.floor(value/60) + ":" + value%60
}
}
}]
}
};
let chart2 = new Chart(time_ctx, {
type: "line",
data: time_data,
options: time_options
});

How to avoid Y axis negative values from google charts

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

Hight Chart Dynamic Json Value is not loading in Series Data Section but Static Value is Loading Finely

Hi I have one issue i was creating one HighChart in this Static values to the series data section is working finely. but The same type value from a dynamic section is not showing.
function getusercategorygraph()
{
$.getJSON('config/alumniusermodes.php',function(data){
//alert(json);
//alert($.parseJSON(data));
//alert(obj);
var finaldata = '[';
var tmp = '';
var chart;
$.each(data, function( index, value ) {
finaldata += '{';
$.each(value, function( index, value ) {
//alert(index);
if(index === 'name')
{
tmp = " " + index + " : '" + value + "', ";
}
else
{
tmp = " " + index + " : " + value + ", ";
}
finaldata += tmp;
//alert("finaldata: " + finaldata);
});
finaldata+='},';
});
finaldata +=']';
//alert(finaldata);
chart = new Highcharts.Chart({
chart: {
/* backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, 'rgb(0, 0, 0)'],
[1, 'rgb(0, 0, 0)']
]
},*/
renderTo : 'user-count',
type: 'column',
},
title: {
text: 'Alumni Users By Category Analytics'
},
xAxis: {
color:'#0077CC',
type: 'category'
},
yAxis: {
title: {
text: 'Total Number of Alumni Members'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y} Members'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y} Members</b><br/>'
},
series: [{
name: "Alumni Type",
colorByPoint: true,
//sdata: [{ name : 'Standard', y : 52, },{ name : 'Silver', y : 24, },{ name : 'Gold', y : 20, },{ name : 'Platinum', y : 6, },]
data: [{ name : 'Standard', y : 52, },{ name : 'Silver', y : 24, },{ name : 'Gold', y : 20, },{ name : 'Platinum', y : 6, },]
//data : finaldata,
}],
});
///chart.series[2].data.push(finaldata);
});
}
i am getting final data like this only
[{ name : 'Standard', y : 52, },{ name : 'Silver', y : 24, },{ name : 'Gold', y : 20, },{ name : 'Platinum', y : 6, },]
but i cant load that in this graph but when paste same value in static mode its showing correctly.
now its showinng a blank section only.
I am new to HighCharts Please help. Thanks in advance.

Your code is creating finaldata as a string, when you want to produce an array. You should have better luck with something like this:
// Create a new array
var finaldata = []
var chart;
// Perform your operations
$.each(data, function( index, value ) {
// Create a new hash
var currentItem = {}
// Create the proper values in your hash
$.each(value, function( index, value ) {
currentItem[index] = value;
});
// Push the new hash to the array
finaldata += currentItem;
});
If all of your data is being passed in a way that your old code successfully created the string you shared, then this should build the object for which you are looking.
To test this you may first want to try leaving your code exactly how it is, and parsing the string to JSON:
// Use this instead of 'data : finaldata'
data: JSON.parse( finaldata ),
This will try to turn your string into the objects on which you are trying to operate. That said, it would be in poor form to practice building an array via string manipulation. I would very strongly encourage you to follow the first approach I detailed.

Hi i Found this as For My Query.
var finaldata = [];
$.getJSON('config/alumniusermodes.php',function(data){
// Create a new array
var finaldata = [];
var chart;
var categories = [];
var tools = [];
$.each(data, function( index, value ) {
var currentItem = {}
finaldata.push({
name: value.name,
y: parseFloat(value.y)
});
});
var chart = new Highcharts.Chart({
chart: {
renderTo : 'user-count',
type: 'column',
},
title: {
text: 'Alumni Users By Category Analytics'
},
xAxis: {
color:'#0077CC',
categories: categories
},
yAxis: {
title: {
text: 'Total Number of Alumni Members'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y} Members'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y} Members</b><br/>'
},
series: [{
name: "Alumni Type",
colorByPoint: true,
data : finaldata,
}],
});
});
This is my right coding which solved my issue

jqplot not display label of value on bar chart

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,
....
}

Categories