I have array From ajax Responses Look Like This
[
{
"name":"online",
"data":["34","155","12"]
},
{"name":"ofline",
"data":["34","155","12"]
}
]
ANd I want to add to Highchart Using ajax look this , but thats Wrong
$.getJSON("MYURL", {"cab":cab,"spv":spv,"sls":sls,"rg":rg}, function(data){
options.series = data;
var chart = new Highcharts.Chart(options);
});
In your example, the yAxis is missing.
Besides, the data must be under following format:
{
name: 'online',
marker: {
symbol: 'diamond'
},
data: [0, 0, 0, 0, 0, 0, 34, 155, 12, 0, 0, 0]
},{
name: 'offline',
marker: {
symbol: 'square'
},
data: [0, 0, 0, 0, 0, 0, 291, 182, 37, 0, 0, 0]
}
For more details, view this
The data array must be an array of numbers, not the strings - you need to change that on the backend site while rendering data or parse the data to an array of numbers just before to insert to the chart.
Demo: https://jsfiddle.net/BlackLabel/twkxezpy/
let dataFromDataBase = [{
"name": "online",
"data": [34, 155, 12]
},
{
"name": "ofline",
"data": [34, 155, 12]
}
];
Related
Here i have a Pie Graph, which is drawn with chart.js. And its working fine. But the problem is the, it renders same color in multiple data sets, which is looking so awkward and confusing.
Here is a snap for that pie chart
Here is my AJAX code
$.ajax({
url: "<?php echo base_url('Analytics/AdminAnalyticsCat');?>",
method: "GET",
success: function (data) {
alert(data);
console.log(data);
var data = JSON.parse(data);
var month = [];
var customers = [];
for (var i in data) {
month.push("Customers in " + data[i].cat_name);
customers.push(data[i].counter);
}
var ctx = document.getElementById("canvasDoughnut").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: month,
datasets: [{
data: customers,
lineTension: 0,
fill: false
}]
},
options: {
legend: {
display: false
}
}
});
}
});
I tries so many times for setup their different colors, but its not working.
So Please guide me, where i am going wrong? Thanks..
I am not seeing anywhere in the code you posted, the mention of specifying color scheme...
Per the official documentation found # http://www.chartjs.org/docs/latest/, you need to do the following --- tweak it as needed
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
put the above before options: {
You can call this function which generates random colors for each bars:
var randomColorGenerator = function () {
return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
};
var barChartData = {
labels: ["Your label sets"],
datasets: [
{
label: "My First dataset",
fillColor: randomColorGenerator(),
strokeColor: randomColorGenerator(),
highlightFill: randomColorGenerator(),
highlightStroke: randomColorGenerator(),
data: [Your datasets]
}
]
};
When I attempt to render the chart with data passed back form ajax, I receive the error, "Uncaught TypeError: Cannot read property 'getTime' of undefined".
$.ajax({
type : 'POST',
url : 'admin-controllers/chart-contorller.php',
dataType : 'json',
encode : true
})
.done(function(data) {
alert('contorller');
if ( success) {
var dataPoints = data.graphData;
console.log(dataPoints);
var chart = new CanvasJS.Chart("timeToSetChart", {
title:{
text: "User Time to initialy set DNS",
fontSize: 20,
},
axisX:{
labelFontSize: 12
},
axisY: {
title: "Number of users",
titleFontSize: 14,
labelFontSize: 12
},
data: [{
type : 'column',
dataPoints: data.graphData
}]
});
chart.render();
}
my string data.graphData comes back as:
[{x: 10, y: 0, label: "1hours"},{x: 20, y: 0, label: "2hours"},{x: 30, y: 16, label: "6hours"},{x: 40, y: 0, label: "12hours"},{x: 50, y: 0, label: "24hours"},{x: 60, y: 0, label: "2days"},{x: 70, y: 0, label: "3days"},{x: 80, y: 0, label: "4days"},{x: 90, y: 0, label: "5days"},{x: 100, y: 0, label: "6days"},{x: 110, y: 0, label: "7days"},{x: 120, y: 3, label: "8plusdays"},]
Which when I paste it into the dataPoints variable it works fine.
I have Highchart LINE type graph which show line graph correctly.I have button to change the data dynamically.i.e. First chart renders 7 days data.On click of 14 days chart renders data correctly but the when i use.
function requestData(response,point){
...data fetching code......
var series = chart.series[0];
chart.series[1].setData(eval(oneArray),false,true);
chart.series[0].setData(eval(twoArray),false,true);
chart.xAxis[0].setCategories(json array, true,true);}
if i remove the chart.xAxis[0].setCategories(json array, true,true); then it show the lines with correct data but x-axis is only numbers,I have to set x-axis with days name.The json array show all correct.
Here is my chart code.
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: "progresschart",
type: "line",
events: {
load: requestData
}
},
credits: {
enabled: false
},
title: {
text: "Calories Burned Vs Calorie Consumed"
},
xAxis: {
categories: [],
},
yAxis: {
title: {
text: "Calories"
},
},
series: [{
name: "Consumed",
data:[]
},{
name: "Burned",
data:[]
}],
exporting: {
enabled: false
}
});
});
First the category array is:
["Thu,28th", "Fri,29th", "Sat,30th", "Sun,1st", "Mon,2nd", "Tue,3rd", "Wed,4th"]
categories array to be set is:
["Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"]
Series[1]:
[403.91604166667, 0, 0, 156.421875, 190.48708333333, 121.66145833333, 52.140625, 104.28125, 440.41447916667, 472.04645833334, 0, 178.3209375, 191.18229166666, 139.04166666667]
Series[2]:
[100, 112, 0, 0, 360, 330, 141, 150, 100, 0, 0, 0, 0, 0]
It's probably bug in old version of Highcharts, updating to 3.0.7+ should resolve that issue.
Working example: http://jsfiddle.net/24dXX/
Code:
var arr = ["Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed"],
oneArray = "[403.91604166667, 0, 0, 156.421875, 190.48708333333, 121.66145833333, 52.140625, 104.28125, 440.41447916667, 472.04645833334, 0, 178.3209375, 191.18229166666, 139.04166666667]",
twoArray = "[100, 112, 0, 0, 360, 330, 141, 150, 100, 0, 0, 0, 0, 0]";
chart.series[1].setData(eval(oneArray), false, true);
chart.series[0].setData(eval(twoArray), false, true);
chart.xAxis[0].setCategories(arr, true, true);
This question already exists:
Closed 10 years ago.
Possible Duplicate:
Dynamic Pie Chart Data in Javascript and PHP
The following code is used to populate a pie chart in javascript:
<script type="text/javascript">
var agg = { label: 'Aggressive', pct: [60, 10, 6, 30, 14, 10] },
bal = { label: 'Balanced', pct: [24, 7, 2, 18, 13, 36] },
mod = { label: 'Moderate', pct: [12, 4, 2, 10, 11, 61] },
inc = { label: 'Income', pct: [ 0, 0, 0, 0, 0,100] },
</script>
Instead of tm: [40, 60, 67, 30, 74, 50] as seen above, I would like to make each of 6 values a php variable. Like: tm: [$r1, $r2, $r3, $r4, $r5, $r6] . How do I do this?
How do I do this with? A php array or json encode?
Yes, json_encode a PHP array:
var agg = <?php echo json_encode(array('label' => 'Aggressive', 'pct' => array($r1, $r2, ...))); ?>,
bal = <?php echo json_encode(...); ?>,
...
I have written a below code which generates a area graph for selected dates (to and from dates).
$(document).ready(function() {
var options = {
"series": [{
"showInLegend": false,
"color": "#D0D0D0",
"name": "Revenue",
"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]}],
"credits": {
"enabled": false
},
"chart": {
"renderTo": "highchart_id",
"defaultSeriesType": "area",
"shadow": true
},
"title": {
"text": null,
"align": "center",
"x": 0,
"y": 20
},
"xAxis": {
"type": "datetime",
"dateTimeLabelFormats": {
"month": "%e. %b",
"year": "%b"
},
"labels": {
"enabled": "false"
}
},
"legend": {
"enabled": true
},
"yAxis": {
"title": {
"text": ""
},
"labels": {
"enabled": true
}
},
"plotOptions": {
"area": {
"stacking": "normal",
"lineColor": "#3E3E3E",
"lineWidth": 3,
"marker": {
"lineWidth": "1",
"lineColor": "#3E3E3E",
"states": {
"hover": {
"enabled": true,
"radius": 1
}
}
}
},
"series": {
"pointStart": 1335823200000,
"pointInterval": 86400000
}
}
};
var chart = new Highcharts.Chart(options);
});
The interval of dates on x-axis is coming one day less. here the series value 2 is for 10 may whereas it is showing for 9 may in graph.
I am new to this highchart, can anybody advice the solution please and let me known if you need any more clarification on the problem.
Try adding this code before declaring the chart
Highcharts.setOptions({
time: {
useUTC: false
}
});
By default highchart used UTC times. By adding the code above it will use the time zone of the browser.