We Keep Coding

Bind dynamic Json data in pie chart

I am using highcharts and want to bind dynamic json data to pie chart.Here is my dynamic string
for(i = 0; i < month.length; i++){
pi_data+='{name:"'+month[i]+'",y: '+ percent[i] +',color: Highcharts.getOptions().colors['+ i
+']},';
}
Here i am generate json string and bind in pie chart data option below
{
type: 'pie',
name: 'Total Percentage',
data: [pi_data],
center: [100, 50],
size: 100,
showInLegend: false,
}
My return string is
{name:"January",y: 24.78,color: Highcharts.getOptions().colors[0]},{name:"February",y: 14.69,color: Highcharts.getOptions().colors[1]},{name:"March",y: 26.51,color: Highcharts.getOptions().colors[2]},{name:"April",y: 34.01,color: Highcharts.getOptions().colors[3]}
If i put directly in data option it working but if i put variable in data option(inside [ ] in data:) it wont work.

I guess you want data to be an array, not a string of JS code (what you get from the loop; it's also malformed), so you need to compose pi_data properly. Try this:
// From the loop I assumed pi_data should be an array.
let pi_data = []
for(i = 0; i < month.length; i++){
pi_data.push({
name: month[i],
y: percent[i],
color: Highcharts.getOptions().colors[i],
});
}
{
type: 'pie',
name: 'Total Percentage',
data: pi_data, // No []!
center: [100, 50],
size: 100,
showInLegend: false,
}

The way you are formatting the data is incorrect. data parameter takes an array of items, where as here your passing is an object.
Try converting it to the following format:
let pi_data = month.map((item,index) => ({
name: item.month,
y: item.percent,
color: Highcharts.getOptions().colors[index]
}));
//Result
[
{ name: "January", y: 24.78, color: Highcharts.getOptions().colors[0] },
{ name: "February", y: 14.69 , color: Highcharts.getOptions().colors[1]},
{ name: "March", y: 26.51,color: Highcharts.getOptions().colors[2] },
{ name: "April", y: 34.01,color: Highcharts.getOptions().colors[3] }
]
And in the options just have this array placed
{
type: 'pie',
name: 'Total Percentage',
data: pi_data,
center: [100, 50],
size: 100,
showInLegend: false,
}
Fiddle for your reference: https://jsfiddle.net/vo3ch9L1/

JavaScript Array JSON.parse (string)

I am using eCharts (a JavaScript charting library) and there is something that's doing my head in. The examples use the following code for markLine (and it works as expected)
markLine : {
symbol: 'none',
tooltip: {show: false},
itemStyle:{
normal:{
lineStyle:{
type: 'solid',
color: '#CCCCCC'
},
tooltip:{
show: false
}
}
},
data: [ [{ "xAxis" : 250, "yAxis" : 0 }, {"xAxis": 250, "yAxis" : 250 }] ]
}
I need to be able to get the data part as a JSON string, but I cannot get it to work. Note: For simplicity, I have the same JSON information I receive as a string called arrayString:
markLine : {
symbol: 'none',
tooltip: {show: false},
itemStyle:{
normal:{
lineStyle:{
type: 'solid',
color: '#CCCCCC'
},
tooltip:{
show: false
}
}
},
data: (function (){
var res = [];
var arrayString = "";
arrayString = '[{ "xAxis" : 250, "yAxis" : 0 }, {"xAxis": 250, "yAxis" : 250 }]';
res = JSON.parse(arrayString);
return res;
})()
}
When I run the JSON.parse code the chart doesn't display, but if I console.log the value of 'res' the array appears to be created correctly.
Is anyone able to assist me with resolving this?
References:
Both of these examples use markLine:
http://echarts.baidu.com/echarts2/doc/example/line1.html#-en
http://echarts.baidu.com/echarts2/doc/example/bar13.html#-en

Should you be adding to your res array rather than overwiting it?
res.push(JSON.parse(arrayString));

Chart.js: passing objects instead of int values as data

Is it possible to pass an array of objects instead of an array of integers? The following code works but results in a flat zero line:
var ctx = document.getElementById("a").getContext("2d");
var data = {
labels: ["Fri", "Sat", "Sun"],
datasets: [{
label: "Chart B",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(150,150,150,1)",
pointColor: "rgba(150,150,150,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [{
y: 48,
name: "Value one",
date: "2015-04-30"
}, {
y: 40,
name: "Value two",
date: "2016-05-30"
}, {
y: 19,
name: "Value three",
date: "2016-06-30"
} ]
}]
};
var Chart = new Chart(ctx).Line(data);

In short, I think your example should work. The key is to use y for the y value in the chart, and to add your arbitrary property to the object, as well.
It looks like this is what you're doing, but you've reported it's not working... It works for me, though! ?
Longer answer
According to the docs for Line, data can be a Number[]:
data: [20, 10]
...but it can also be a Point[]:
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]
This was intended to be used for sparsely-populated data sets. Through experimentation, I've found you can omit the x property and simply specify the y property. The x value will be inferred, as usual.
You can also add in any other arbitrary properties that can be accessed from your label callback. So, you might end up with something like this:
data: [{
y: 20,
myProperty: "Something"
}, {
y: 10,
myProperty: "Something Else"
}]

I can confirm that answer #rinogo gave works on latests version. You can add custom properties to dataset and use 'em in tooltip or elsewhere afterwards.
First add data to dataset. On my case I only have one set, so I'm just pushing points.
chartData.datasets[0].data.push({
y: groupedBooking.distinctCount,
distinctUsers: distinctUsers
});
... and finally override callback with chartOptions:
options: {
tooltips: {
callbacks: {
label(tooltipItem, data) {
console.log(data);
return data.datasets[0].data[tooltipItem.index].distinctUsers;
}
}
}
}
If you would happen to have multiple datasets you get datasetIndex from tooltipItem as well... so to confirm, X can be omitted from datapoint and customer properties are preserved within object.

In the data structure doc (version 3.5.1 at the time of writing this), it is documented objects can be used as data and parsing option is also available to pick the keys.
Example from the doc:
data: {
datasets: [{
data: [{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}]
}]
},
options: {
parsing: {
xAxisKey: 'id',
yAxisKey: 'nested.value'
}
}

put different names to each bar in Highcharts

How I can rename each bar, I want to have different names. always it appears "bar1", "bar2", etc. this is the name of the series. but I want it to appear in place of those texts, others I want to customize. this is what I do. put different names, if there are 9 bars I want to put different names to the bars, bar1, bar2, bar3, Bar4, Bar5, Bar6, Bar7, Bar8, Bar9. I do not want to repeat
in my example.
series: [{
name: 'bar1',
data: [1000, 950, 920, 0, 850],
color: "#FF0000"
}, {
name: 'bar2',
data: [800, 770, 750, 0, 730],
color: "#000000"
}, {
name: 'bar3',
data: [600, 540, 535, 500, 30],
color: "#00FF00"
},
{
name: 'bar4',
data: [28, 28, 28, 28, 28],
color: "#00FF00"
}]
http://jsfiddle.net/05L1n3wb/

This is done by changing name: 'bar1' to something you want. If you still need series.name to be 'bar1' then you should really think harder about your data model. If you want to change the text displayed based on the contents of series.name you can do that with the label formatter or dataLabel formatter.

As you can read in previous answer, you can use dataLabels formatter for changing string you are displaying for your columns: http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels.formatter
You can add custom parameter to your points, like name:
series: [{
name: 'bar1',
data: [{
y: 1000,
name: 'bar1'
}, {
y: 950,
name: 'bar5'
}, {
y: 920,
name: 'bar9'
}, {
y: 0,
name: 'bar13'
}, {
y: 850,
name: 'bar17'
}],
color: "#FF0000"
}]
and inside your dataLabels formatter you can display this parameter:
formatter: function() {
var string = this.point.name + ' ';
if (this.y <= 30) {
string += this.y;
}
return string;
}
example:
http://jsfiddle.net/05L1n3wb/2/

Change Highcharts Series color

EDIT:
So now I have a chart with all my data pushed off to the right, BUT I have labels in different colors for the sets I want to show but no data?? Updated my code
Original post:
I have a working highchart here http://opensourcesurf.com/chart.html . The problem is when I try and change the color of an individual data set, they all change. How could I change these settings given my code? Thanks in advance!
code:
var options1 = {
chart: {
renderTo: 'container1',
type: 'area'
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'Swell Period',
color: '#0066FF',
data: 'newSeriesData',
},
{ name: ' Maximum Breaking Wave Height',
color: '#ffffff',
data: 'newSeriesData',
},
{ name: 'Swell Height',
color: '#123456',
data: 'newSeriesData',
}],
};
var drawChart = function(data, name, color) {
var newSeriesData = {
name: name,
data: data
};
// Add the new data to the series array
options1.series.push(newSeriesData);
// If you want to remove old series data, you can do that here too
// Render the chart
var chart = new Highcharts.Chart(options1);
};
$.getJSON('decode.php', function(data){
drawChart(data, 'Swell Height');
});
$.getJSON('decode2.php', function(data){
drawChart(data, ' Maximum Breaking Wave Height');
});
$.getJSON('decode3.php', function(data){
drawChart(data, 'Swell Period');
});

Try this:
// 'series' is an array of objects with keys:
// - 'name' (string)
// - 'data' (array)
// - 'color' (HTML color code)
var newSeriesData = {
name: name,
data: data,
color: color
};

The way to specify a color for a specific series is to define it when you're defining the series. For example:
series: [{
name: 'John',
color: '#0066FF',
dashStyle: 'ShortDash',
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 2, 1), 71.5],
[Date.UTC(2010, 3, 1), 106.4]
]
},
So essentially when you're creating your series in your drawchart function, do a check for the name, and appropriately assign a color:
var color;
if(name=="Swell Height"){
color="#0066FF";
}else if(name=="Maximum Breaking Wave Height"){
color="#0066EE";
}else if(name=="Swell Period"){
color="#0066HH";
}
var newSeriesData = {
name: name,
data: data,
color: color
};

It looks to me like you are not looping through the array of data and/or you only have one set of data in data.