I have data Json :
0: {nama: "Democrats", drilldown: "Democrats-2010", y: 17}
drilldown: "Democrats-2010"
nama: "Democrats"
y: 17
1: {nama: "Other", drilldown: "Other-2010", y: 14}
drilldown: "Other-2010"
nama: "Other"
y: 14
2: {nama: "Republican", drilldown: "Republican-2010", y: 11}
drilldown: "Republican-2010"
nama: "Republican"
y: 11
how get value "nama" to be applied to the highchart data series
You need to adapt your JSON data to the format required by Highcharts. Example:
series: [{
data: data.map(el => ({
name: el.nama,
drilldown: el.drilldown,
y: el.y
}))
}],
xAxis: {
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/ncxe1h36/
API Refernece: https://api.highcharts.com/highcharts/series.column.data
I assumed you would want the bar chart and I have made one. And I assumed the following data is what you want to build with the bar chart. I used jQuery to store your jsonData in the array so you would see step-by-step to get on.
Edited: here is the jsFiddle,
https://jsfiddle.net/kopigod/vn4abw92/1/
var namaArray = [],
yArray = [];
var jsonData = [
{nama: "Democrats", drilldown: "Democrats-2010", y: 17},
{nama: "Other", drilldown: "Other-2010", y: 14},
{nama: "Republican", drilldown: "Republican-2010", y: 11}
];
$.each(jsonData, function(index, value){
namaArray.push(value.nama);
yArray.push(value.y);
});
Highcharts.chart('YourChartIdInHTML', {
chart: {
type: 'column'
},
title: {
text: 'Your main title'
},
xAxis: {
categories: namaArray
},
yAxis: {
min: 0,
title: {
text: 'Y-axis Title'
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: "Test",
data: yArray
}]
});
Of course HighChart allows you to customize the text when you mouse over the bar.
Related
I want to plot my temperature readings of my DIY thermostat and the heater-state using Chart.js. The heater-state is 0 or 1, but I saved it in a minimal representation: I have values only, when it comes on/off. The heating times are never equal to the measurement times, but in between.
I want to plot time-data on the same time x-axis. From at least 20 examples, questions here and other resources I collected this Fiddle, which is my best guess. However, I can't reasonably plot both time axes and their data. If I reduce it to numerical data on the x axis in a very much simplified example, I get the smaller dataset plotted on the first few x-values of the latter one.
The js code is:
var options = {
type: 'line',
data: {
labels: ["2018-12-07 08:45:17",
"2018-12-07 09:30:17", "2018-12-07 10:15:16",
"2018-12-07 11:00:17", "2018-12-07 14:45:16"],
datasets: [
{
label: '1st line',
data: [12, 19, 7, 9, 10, 8],
},
{
steppedLine: 'before',
xAxisID: 'x-axis-2',
label: '2nd line',
data: [
{
x: "2018-12-07 09:15:47",
y: 3
}, {
x: "2018-12-07 10:55:25",
y: 5
}, {
x: "2018-12-07 13:05:00",
y: 3
}],
}
]
},
options: {
scales: {
xAxes: [{}, {
id: 'x-axis-2',
type: 'linear',
position: 'bottom',
//display: false,
}],
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
First, you could use a unique xAxis and define it as a time cartesian axis.
xAxes: [{
type: 'time',
time: {
unit: 'second'
}
}]
Also you shouldn't provide data.labels but rather define each data point using an object containing x and y properties.
var options = {
type: 'line',
data: {
datasets: [{
label: '1st line',
data: [{
x: "2018-12-07 08:45:17",
y: 12
},
{
x: "2018-12-07 09:30:17",
y: 19
},
{
x: "2018-12-07 10:15:16",
y: 7
},
{
x: "2018-12-07 11:00:17",
y: 9
},
{
x: "2018-12-07 14:45:16",
y: 10
}
]
},
{
label: '2nd line',
steppedLine: 'before',
data: [{
x: "2018-12-07 09:15:47",
y: 3
},
{
x: "2018-12-07 10:55:25",
y: 5
},
{
x: "2018-12-07 13:05:00",
y: 3
}
],
backgroundColor: 'lightgreen'
}
]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'second'
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chartJSContainer" height="90"></canvas>
I was finally able to figure out the problem which was the datastructure of the javaScript object. It requires this structure [{ "x": 1, "y":1}, {"x":2, "y":3} ] where in particular the x and y are the object properties x and y for each entry, rather than once and for all (which always made a lot more sense to me). But I can send the data without this extra labels and convert them on the fly with javascript like so:
datasets: [
{
label: 'Temperature',
data: response.temperature.x.map((x, i) => ({ x, y: response.temperature.y[i] })),
},
{
label: 'Room 2 Temperature',
data: response.temp2.x.map((x, i) => ({ x, y: response.temp2.y[i] })),
},
] // datasets
How to change series on highchart properties series?
this is jsfiddle
its similiar like this but different structure
i want to change many type of series like this
series: [{
name: 'Nominal',
data: [
{ name: 'Remunerasi', y: 200000, color: 'red'},
{ name: 'Penyesuaian Gaji', y: 1200000, color: 'yellow' }
]
}]
//or this
series: [{
name: 'Brands',
data: [
{ name: 'Promosi', y: 33.38 },
{ name: 'Upgrading', y: 14.77 },
{ name: 'GP Dibawah Min', y: 22.91 },
{ name: 'Kontrak Kedua', y: 20}
]
}]
//or this
series: [{
name: 'Sebelum',
data: [200000, 300000, 400000, 400000],
color : 'red'
},{
name: 'Setelah',
data: [400000,600000,800000,800000],
color : 'yellow'
},{
name: 'Kenaikan',
data: [200000, 300000, 400000, 400000],
color : 'blue'
}]
Im trying to change the value inside those series using a button
i hope this tuto help you
setdata:Apply a new set of data to the series and optionally redraw it. The new data array is passed by reference (except in case of updatePoints), and may later be mutated when updating the chart data.
I have bar chart, in which I want each bar to start different value. Now they all starts from 0. I have only find how to change the starting point, that would be the same for each. Like all staring from 1.
But I need the First to be draw like 1-2, Second: 1-4 and Third: 7-10.
How can I vary it for different cases?
var chart = new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'container'
},
xAxis: {
categories: ['First', 'Second', 'Third']
},
series: [{
data: [{
name: 'Point 1',
y: 2
}, {
name: 'Point 2',
y: 4
}, {
name: 'Point 3',
y: 10
}]
}]
});
That's what the columnrange chart type is for:
http://www.highcharts.com/demo/columnrange
Use the inverted property in order to make it a bar instead of a column:
http://api.highcharts.com/highcharts/chart.inverted)
Example:
chart: {
type: 'columnrange',
inverted: true
}
Fiddle:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/
the possible solution is to make your bar chart 'stacking' and add new data array to your series where offsets will be set and then make them "invisible":
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
data: [{name: 'Point 1', y: 2},
{name: 'Point 2', y: 4},
{name: 'Point 3', y: 10}]
},{
data: [{name: 'Point 1', y: 2},
{name: 'Point 2', y: 4},
{name: 'Point 3', y: 10}],
color: 'white',
enableMouseTracking:false,
showInLegend: false
}]
I hope this example will explain it better
I'm trying to have different chart on each level using HighCharts.
For example-
Level-1 contains Bar graph.
Level-2 contains Pie graph.
Level-3 contains Table representation.
Below is my code snippet :
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie' // Mentioned only pie.Need different graph on individual level.
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
borderWidth: 1,
dataLabels: {
enabled: true,
}
}
},
series: [{
id: 'toplevel',
name: 'Animals',
data: [
{name: 'Cats', y: 4, drilldown: 'level1'}, //Level-1
{name: 'Dogs', y: 2},
{name: 'Cows', y: 1},
{name: 'Sheep',y: 2},
{name: 'Pigs', y: 1}
]
}],
drilldown: {
series: [ {
id:'level1',
name: 'Level 1',
data: [
{name: 'Trees', y: 1},
{name: 'Plants', y: 2},
{name: 'Grass', y: 3},
{name: 'Deeper Level-2', y: 4, drilldown: 'level2'} //Level-2
]
},{
id:'level2',
name: 'Level 2',
data: [
{name: 'Green', y:1},
{name: 'Red', y:2},
{name: 'Blue', y:3},
{name: 'Deeper Level-3', y: 4, drilldown: 'level3'} //Level-3
]
},{
id: 'level3',
name: 'Level 3',
data: [
{name:'Violet', y:1},
{name:'Red',y:2},
{name:'Yellow', y:3}
]
}]
}
})
I'm expecting that, while click on each level;Data is to be appeared with different chart on each individual level.
Above code is giving me data in same chart type on slice click which is supposed to be in different chart type.
To change each individual level chart type you should use series.type like this:
drilldown: {
series: [ {
id:'level1',
name: 'Level 1',
type: 'bar',
//^^^^^^^^^^^
data: [
{name: 'Trees', y: 1},
{name: 'Plants', y: 2},
{name: 'Grass', y: 3},
{name: 'Deeper Level-2', y: 4, drilldown: 'level2'} //Level-2
]
},{
id:'level2',
name: 'Level 2',
type: 'pie',
//^^^^^^^^^^^^
...
}]
}
since you want to drill to table at last level and highcharts does not support such thing you should create a custom drill to table:
define a method to create custom table when chart drills to level-3
var createTable = function(data) {
$("#container").hide();
// remove the existing table
$('#here_table .table').remove();
// create a table object
var table = $('<div class="table">back<table></table></div>').addClass('chart-table');
// iterate the series object, create rows and columnts
$.each(data, function( index, value ) {
var row = $('<tr></tr>').addClass('chart-row');
var col1 = $('<td></td>').text(value.name).appendTo(row);
var col2 = $('<td></td>').text(value.y).appendTo(row);
// mark the row of the clicked sector
table.append(row);
});
}
add point click event handler for level-2 points,call createTable method and pass the level-3 data to createTable:
{
id:'level2',
name: 'Level 2',
type: 'pie',
point: {
events: {
click: function () {
console.log(this);
if(this.name == "Deeper Level-3"){
var data = [
{name:'Violet', y:1},
{name:'Red',y:2},
{name:'Yellow', y:3}
];
createTable(data);
}
}
}
},
data: [
{name: 'Green', y:1},
{name: 'Red', y:2},
{name: 'Blue', y:3},
{name: 'Deeper Level-3', y: 4} //Level-3
]
}
and finally add an event handler for table back to get back where you were:
tableBack = function(){
$("#container").show();
// remove the existing table
$('#here_table .table').remove();
}
Working Fiddle of what I have done
hope that helps
You just need set type of the data series. see a jsfiddle
series: [{
name: 'IE distribution',
id: 'IE distribution',
type: 'bar',
data: [
['asia', 24.13],
['europe', 17.2],
['africa', 8.11]
]
}
How can I pass a third value (e.g. ID number) in a Highcharts time series so that I can open a new window based on it on marker click? JsFiddle here.
I'm familiar with this method for a simple chart with categories, but not for a time series.
Typically, a Highcharts time series accepts a series of arrays like [1401285311000,1], which can be read in a click event with event.point.options.x and event.point.options.y.
Is there a way to add an idto each point, and then read it in a point's click event callback? I've tried passing it as a third value (Highcharts ignores it completely), or putting it under id after the two values ([1401285311000, 1, id: {1}]) which breaks the chart.
Any ideas?
// Replacing ajax call with a simple array for simplicity's sake
var data = [{"name":"Value","unit":"","data":[[1401285311000,5, 1],[1401288036000,10, 2],[1401289436000,8, 3],[1401291099000,15, 4]]}, {"name":"Value 2","unit":"","data":[[1401285311000,10, 1],[1401288036000,12, 2],[1401289436000,5, 3],[1401291099000,9, 4]]}]
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'Time Series'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime',
minRange: 14 * 24 * 3600 // fourteen days
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 3,
marker: {
fillColor: null,
lineWidth: 2,
lineColor: null, // inherit from series
},
events:{
click: function (event, i) {
console.log(event.point);
}
}
},
line: {
dataLabels:{
enabled: false
}
},
},
series: data
});
});
Just because it's time data doesn't mean you can't use point objects instead of arrays:
var data = [{
"name": "Value",
"unit": "",
"data": [
{x: 1401285311000, y: 5, id: 1},
{x: 1401288036000, y: 10, id: 2},
{x: 1401289436000, y: 8, id: 3},
{x: 1401291099000, y: 15, id: 4}
]
}, {
"name": "Value 2",
"unit": "",
"data": [
{x: 1401285311000, y: 10, id: 1},
{x: 1401288036000, y: 12, id: 2},
{x: 1401289436000, y: 5, id: 3},
{x: 1401291099000, y: 9, id: 4}
]
}];
Updated fiddle.