I want to implement plugin chart into my code, the chart code is like
chart = new Highcharts.Chart({
},
series: [{
type: 'pie',
name: 'criterin',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
I have array that I got from ajax function which contains the information that I want to replace into the chart.
for example, I alert sample array and result like:
post work,0.64,quality,0.35
How can I use my array to integrate with chart code.
So, if I'm understanding you correctly, you have an array that looks like this
['post work',0.64,'quality',0.35]
And you want it to look like this:
[
['post work', 0.64],
['quality', 0.35]
]
Something like this should work
function array1Dto2D(sourceArray) {
var array2D = [];
for (var i=0; i < sourceArray.length - 1; i+=2) {
var pair = [sourceArray[i], sourceArray[i+1]];
array2D.push(pair);
}
return array2D;
}
and be used something like this (Note I don't use highcharts, but I don't think the way you had it in your question was right, with the empty object as a first argument):
chart = new Highcharts.Chart({
series: [{
type: 'pie',
name: 'criterin',
data: array1Dto2D(my1dsourcedata)
}]
});
Related
I am using the Javascript ECharts library for displaying some data in my Angular 2+ app. I see that all the examples have some configuration like the following:
{
xAxis: [
data: ['00:00', '01:15', '02:30', '03:45']
],
series: [
{ name: 'A', type: 'line', data: [300, 280, 250, 260] },
{ name: 'B', type: 'line', data: [200, 120, 700, 290] },
]
}
But my data does not always provide values for all the labels in the x axis. For example, I would need to fit these arrays of custom objects into the chart:
const series1 = [{ label: '00:00', value: 300 }, { label: '02:30', value: 120 }];
const series2 = [{ label: '03:45', value: 890} ];
Of course, I could manually insert null or empty values in all the series so that all of them provide a value for each label in the axis. But I believe there should be a more straightforward way to achieve this in ECharts, as it is quite simple in other chart libraries like Kendo Charts.
Assuming you are working with line chart, below is the solution, anyway it is not that different for other charts, just make sure your xAxis type is category
Your xAxis type should be set to category, and data should be something like this
xAxis: [
type: 'category'
data: [ {name: '00:00'}, ....]
]
your series data should look like this
//dimx , value
const series2 = [['03:45', 890]];
You can use the 'time' format to fit series with different lengths.
Even the series, in this way, can have different lengths.
const colors = ['#5470C6', '#EE6666'];
let option = {
color: colors,
xAxis: {
type: 'time',
splitNumber: 11,
axisLabel: {
rotate: 45,
formatter: { hour: '{hh} : {mm}' },
},
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Precipitation(2015)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:24:33.123', 7.9],
['2012-03-01T12:25:33.123', 9.0],
['2012-03-01T12:28:33.123', 7.9],
['2012-03-01T12:30:33.123', 9.0],
['2012-03-01T12:32:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
{
name: 'Precipitation(2016)',
type: 'line',
data: [
['2012-03-01T12:22:33.123', 2.2],
['2012-03-01T12:23:33.123', 5.6],
['2012-03-01T12:38:33.123', 26.4],
['2012-03-01T12:40:33.123', 28.7],
],
},
],
};
result
I would like to use highstock but I can't seem to get it to work... my code:
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?', function (data) {
// create the chart
var options = {
chart: {
alignTicks: false,
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Volume'
},
series: [{
type: 'column',
name: 'AAPL Stock Volume',
data: data,
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
};
});
var chart = new stockChart(options);
});
The browser doesn't display anything and if I go to look at the error;
stockChart is not defined(…)
I have also tried the code from this JSFiddle, but it didn't work either. So i tried to use the options, but this doesn't work as well.. Could someone help me out?
You need to add the HighStock JavaScript library before your initialisation script:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
Alternatively, as given in the fiddle, you can use this to initialise:
chart = Highcharts.stockChart('container', options);
You are calling the function stockChart as a constructor function using the keyword "new". The reason you get a "is not defined error" is because in your code, that stockChart function is nowhere to be found!
To create one write
var stockChart = function(opt){
this.someproperty = "hello there im a stockchart"
};
With this function, you can then "new" the stockChart
var my_stockchart = new stockChart();
Now you can use your newly formed my_stockchart object and call its methods. Try it in your console.
my_stockchart.someproperty
returns => "hello there im a stockchart"
Now if you want the quick and dirty answer, I guess other people got you covered. So basically what it comes down to is that you're calling a function that is not yet defined in your code. Hope this helps.
Use Highcharts.stockChart or new Highcharts.StockChart.
Also, you create a new chart before the data is received (get.json works asynchronously) and you try to access options which is defined in a different scope.
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?', function (data) {
// create the chart
var options = {
chart: {
alignTicks: false,
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Volume'
},
series: [{
type: 'column',
name: 'AAPL Stock Volume',
data: data,
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
};
var chart = Highcharts.stockChart(options); // alternatively new Highcharts.StockChart(options);
});
});
This is my pie chart js code:
window.onload = function(){
var pieData = [
{
value: 300,
color:getRandomColor(),
highlight: "#62b9fb",
},
{
value: 50,
color: "#ffb53e",
highlight: "#fac878",
},
{
value: 100,
color: "#1ebfae",
highlight: "#3cdfce",
},
{
value: 120,
color: "#f9243f",
highlight: "#f6495f",
}
];
var chart4 = document.getElementById("pie-chart").getContext("2d");
window.myPie = new Chart(chart4).Pie(pieData, {
responsive : true
});
};
I am using this javascript pluging. My pie chart it works but its values is gives statically. I believe that I have to use an ajax, which is not a problem. My problem is how can I create the piedata data format after I decoded the json and how can I create the color? I have to generate randomly colors? Can you help me with this ?
Perhaps I don't fully understand your question; but..
var colors = Highcharts.getOptions().colors, // references stock colors defined in highcharts.js
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
data = [{
y: 55.11,
color: colors[0], // references stock color highcharts.js from color array
drilldown: {
name: 'MSIE versions',
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'], // JS data arrays
data: [10.85, 7.35, 33.06, 2.81], // data areas
color: colors[0] // references stock color highcharts.js color array
}
},
JSFIDDLE
For custom colors, outside of what is given to choose from via highcharts.js download that full js. Locate color array in there, and define your own via hex and call them.
If you need to pull data from a specific place, you need to specify..
Sample of an AJAX call with the chart:
var GetChartData = function () {
$.ajax({
url: serviceUri,
method: 'GET',
dataType: 'json',
success: function (d) {
chartData = {
labels: d.AxisLabels,
datasets: [
{
I'm using Highcharts, and I used to be able to get labels on the side. But it's not working now, am I missing something? The red arrow is where I would want the labels like in the following example.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-basic/
This is the code I'm using, I add the series in a dynamic way.
credits: {
enabled: false
},
chart: {
type: 'bar'
},
xAxis: {
categories: ['Jan', 'Feb'],
labels: {
enabled: true,
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Score',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
}
});
// Add Series
var detailchart = $('#chart-detail').highcharts();
var categories = new Array;
// Set Chart Title
detailchart.setTitle({text: results[0].category});
$.each(results, function(i, data){
categories.push(data.name);
detailchart.addSeries({
name: data.name,
data: [data.score]
});
});
detailchart.xAxis[0].setCategories(["1", "2"]);
$('#chart-detail').highcharts().reflow();
Results is an array that looks like this (I get it through ajax):
As I understand from your code here, you wish to specify two categories with names 1 and 2 but you are not specifying any data for second category, So the only category that is showing on your chart is 1. Your data array for each series must have elements per each category. For example if you have two category you should consider having two data elements in each series. In this line data: [data.score] you are just specifying one element in data array. Your code should be something like this: (make it dynamic per your need)
$.each(results, function(i, data){
categories.push(data.name);
detailchart.addSeries({
name: data.name,
data: [data.score, 40], //40 is some data for your second category.
});
});
Demo: http://jsfiddle.net/u6crkatv/
Only what you need is use 4 series, each of them with single data point.
series: [{
name: 'Year 1800',
data: [107]
}, {
name: 'Year 1900',
data: [138]
}, {
name: 'Year 2008',
data: [973]
},{
name: 'Year 20098',
data: [973]
}]
Example: http://jsfiddle.net/y9wzggc4/
I need assistance on selecting a highcharts pie slice onLoad using HighCharts sister plugin HighChartTables.
Not using <td class="data" data-graph-name="name" data-graph-item-highlight="1">XYZ</td>
As this only pull out the slice, not the selected data behind it...
Any help would be much appreciated.
If what you want is to have a slice of the pie selected on initial load you use the sliced property. See this demo here. To do this you add a property to a point you want to have selected:
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
I'm not sure how to achieve that in HighchartTable, but you can get this using chart.events.load callback, to find sliced point and just render report, see: http://jsfiddle.net/6mk3S/36/
And code:
highChartConfig.chart.events = {
load: function () {
var data = this.series[0].data,
dLen = data.length,
i = 0;
while (dLen > i) {
var point = data[i];
if (point.sliced) {
$report.html('<h2>' + point.name + '</h2><p>' + point.percentage.toFixed(1) + '%</p>');
i = dLen;
}
i++;
}
}
}