I'm an beginner in js code and i want to use Highcharts to construct a treemap with color from a csv.
My csv looks like that :
Name,Value,colorValue
The first column is the name.
The second one is the percentage of activity.
The third one is a color attribute to say if the percentage (of the 2nd column) has been increase or decrease (Color red to green).
Do someone has an example ?
Because it doesn't work, nothing happen (no error too), i think it come from the csv load.
Here my actual code :
HTML :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<pre id="data" style="display:none">Name,Value,colorValue
A,1,1
B,10,25
C,20,0
D,30,16
E,40,78
F,50,85
G,60,20
H,70,35
I,80,9
</pre>
<div id="container"></div>
<script src="Highcharts/code/highcharts.js"></script>
<script src="Highcharts/code/modules/heatmap.js"></script>
<script src="Highcharts/code/modules/treemap.js"></script>
<script src="Highcharts/code/modules/data.js"></script>
<script src="index.js"></script>
</body>
</html>
my Js :
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[5]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: {
csv: document.getElementById('data').innerHTML,
seriesMapping: [{
colorValue: 2
}]
}
}],
title: {
text: 'Highcharts Treemap'
}
});
The CSV data properties should not be inside a series object but chart object, like that:
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[5]
},
data: {
csv: document.getElementById('data').innerHTML,
seriesMapping: [{
colorValue: 2
}]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
keys: ['name', 'value', 'colorValue']
}],
title: {
text: 'Highcharts Treemap'
}
});
Demo:
https://jsfiddle.net/BlackLabel/L4uo8h13/1/
API reference:
https://api.highcharts.com/highcharts/data.csv
I need to implement mapbubble using highmaps. I have generated a custom geojson file using qgis for maps.
I refered this example but I am not getting the bubbles on the map. Even I do not have any errors in the console except this:
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom Highmap</title>
</head>
<body>
<div id="container" style="height: 500px; min-width: 350px; max-width: 800px; margin: 0 auto;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>
<script src='./data/custom-world.js'></script>
<script>
$.getJSON('./data/data.json', function (data) {
Highcharts.mapChart('container', {
chart: {
borderWidth: 1,
map: 'custom/world'
},
title: {
text: 'World population 2013 by country'
},
subtitle: {
text: 'Demo of Highcharts map with bubbles'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [{
name: 'Countries',
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
name: 'Population 2016',
joinBy: ['ISO_A2', 'name'],
data: data,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.deposited}: [BTC]'
}
}]
});
});
</script>
</body>
</html>
data.json
[
{
"name" : "GB",
"deposited" : "5"
},
{
"name" : "RU",
"deposited" : "10"
},
{
"name" : "CH",
"deposited" : "3"
},
{
"name" : "IN",
"deposited" : "50"
}
]
custom-world.js
Please download this file from here
Now the problem is, I am getting custom map but not the map bubbles.
Any help will be appreciated as these highchart/maps are bit confusing for me.
The code looks perfectly fine. However, the problem seems to be related to your data.json file. You don't define the size of the bubble (z - property). Check docs: https://api.highcharts.com/highmaps/series.mapbubble.data.z. That's why bubbles are not visible.
Example data.json:
[
{
"name" : "GB",
"deposited" : "5",
"z": 1000
},
{
"name" : "RU",
"deposited" : "10",
"z": 1350
}
...
]
I'm using ChartJS for a project at work, where I try to generate a chart from one or more series of data and some option (chart type, title, type of values of x and y, and so on). Everything is going smooth except of a scatter type when I have multiple dataset on data.
var ctx = $('#myChart');
var chart = new Chart (ctx,{
type: "scatter",
data: {
"datasets":[
{
label:"Series #1",
fill:false,
borderColor:"rgba(0,137,176,0.4)",
backgroundColor:"rgba(0,137,176,0.1)",
pointBorderColor:"rgba(0,137,176,0.7)",
pointBackgroundColor:"rgba(0,137,176,0.5)",
data:[
{"x":"alpha","y":36.2},
{"x":"beta","y":36.9},
{"x":"gamma","y":37},
{"x":"delta","y":38.3},
{"x":"epsilon","y":37.9},
{"x":"zeta","y":37.2}
]
}, {
label:"Series #2",
fill:false,
borderColor:"rgba(19,237,150,0.4)",
backgroundColor:"rgba(19,237,150,0.1)",
pointBorderColor:"rgba(19,237,150,0.7)",
pointBackgroundColor:"rgba(19,237,150,0.5)",
data:[
{"x":"alpha","y":37.4},
{"x":"beta","y":37.1},
{"x":"gamma","y":36.5},
{"x":"delta","y":36.4},
{"x":"epsilon","y":36.4},
{"x":"zeta","y":36.5}
]
}, {
label:"Series #3",
fill:false,
borderColor:"rgba(248,231,28,0.4)",
backgroundColor:"rgba(248,231,28,0.1)",
pointBorderColor:"rgba(248,231,28,0.7)",
pointBackgroundColor:"rgba(248,231,28,0.5)",
data:[
{"x":"alpha","y":38.1},
{"x":"beta","y":38.4},
{"x":"gamma","y":39},
{"x":"delta","y":39.2},
{"x":"epsilon","y":38.1},
{"x":"zeta","y":37.4}
]
}],
"labels":["alpha","beta","gamma","delta","epsilon","zeta"]},
options: {
elements: { line: { tension: 0 } },
scales: {
xAxes: [
{
scaleLabel:{
display:true,
labelString:"Date"
},
bounds:"data",
type:"category"
},{
display:false
},{
display:false
}
],
yAxes:[
{
scaleLabel: {
display:true,
labelString:"Temperature (°C)"
},
bounds:"data",
ticks:{
min:35.9,
max:39.5,
autoSkip:false,
stepSize:0.6
}
}, {
display:false
}, {
display:false
}
]
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
As you can easily notice, in my graph there's no grid, no xAxes definition, no yAxes definition. And I don't know why.
So, this is my question: why my scatter chart do not show grid and axes?
I give two more hints:
1 - if you play with the snippet changing the chart type from scatter to line, everything works fine.
2 - The weird xAxes structure is automatically generated since the three passed datasets uses all the same categories. My code create the first xAxes from the first dataset, and create a simple object { display: false } for the other datasets (chart.options.scales.xAxes requires to be an Array of the same size of the Dataset).
I always consider myself a newbie so any suggestion (about this problem, but also about my approach to it) is more than welcome.
If you remove the { display: false } you can see the gridlines. Not sure if you need this or not?
If you do really need this, then you can always check if (type === 'line') and if so you add the { display: false } to the options.
var ctx = $('#myChart');
var chart = new Chart (ctx,{
type: "scatter",
data: {
"datasets":[
{
label:"Series #1",
fill:false,
borderColor:"rgba(0,137,176,0.4)",
backgroundColor:"rgba(0,137,176,0.1)",
pointBorderColor:"rgba(0,137,176,0.7)",
pointBackgroundColor:"rgba(0,137,176,0.5)",
data:[
{"x":"alpha","y":36.2},
{"x":"beta","y":36.9},
{"x":"gamma","y":37},
{"x":"delta","y":38.3},
{"x":"epsilon","y":37.9},
{"x":"zeta","y":37.2}
]
}, {
label:"Series #2",
fill:false,
borderColor:"rgba(19,237,150,0.4)",
backgroundColor:"rgba(19,237,150,0.1)",
pointBorderColor:"rgba(19,237,150,0.7)",
pointBackgroundColor:"rgba(19,237,150,0.5)",
data:[
{"x":"alpha","y":37.4},
{"x":"beta","y":37.1},
{"x":"gamma","y":36.5},
{"x":"delta","y":36.4},
{"x":"epsilon","y":36.4},
{"x":"zeta","y":36.5}
]
}, {
label:"Series #3",
fill:false,
borderColor:"rgba(248,231,28,0.4)",
backgroundColor:"rgba(248,231,28,0.1)",
pointBorderColor:"rgba(248,231,28,0.7)",
pointBackgroundColor:"rgba(248,231,28,0.5)",
data:[
{"x":"alpha","y":38.1},
{"x":"beta","y":38.4},
{"x":"gamma","y":39},
{"x":"delta","y":39.2},
{"x":"epsilon","y":38.1},
{"x":"zeta","y":37.4}
]
}],
"labels":["alpha","beta","gamma","delta","epsilon","zeta"]},
options: {
elements: { line: { tension: 0 } },
scales: {
xAxes: [
{
scaleLabel:{
display:true,
labelString:"Date"
},
bounds:"data",
type:"category",
}
],
yAxes:[
{
scaleLabel: {
display:true,
labelString:"Temperature (°C)"
},
bounds:"data",
ticks:{
min:35.9,
max:39.5,
autoSkip:false,
stepSize:0.6
}
}
]
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>
I have two JSON end points. I am trying to plot a Highcharts bar graph with drilldown. The drilldown will point to another JSON endpoint. In the graph data is coming dynamically from end points.
JSON 1 :- https://api.myjson.com/bins/156yh3
JSON 1 Structure :-
[{
"name": "cricket",
"number": "2"
}]
It will first plot the graph with JSON 1 Data. In the first graph, X-Axis represents "name" and Y-Axis represents "number". Whenever we click on any bar then it will call the JSON 2 endpoint and pass the clicked bar "name" as URL parameter.
JSON 2 end point looks like, api.domain.com/{{name}}//
if we click on "orange" bar then request url will change to api.domain.com/cricket/
JSON 2 Structure :-
[{
"player": "xyz",
"points": "2"
}]
In the second graph, X-Axis represents "player" and Y-Axis represents "points". I think, I have to call a Ajax request in drilldown when a bar is clicked. I can plot the first graph but what is the recommended way to plot the second graph, which will come in drill down.
Code for graph 1 :-
$(function() {
$.getJSON("https://api.myjson.com/bins/156yh3", function(data) {
console.log(data);
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Name Vs Numbers'
},
subtitle: {
text: 'Chart View Here'
},
xAxis: {
type: 'category',
categories: data.map(function(x) {
return x.name;
})
},
yAxis: {
title: {
text: 'Numbers'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
},
series: [{
colorByPoint: true,
data: data.map(function(x) {
return x.number * 1;
})
}]
});
});
});
HTML :-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>
Refer to this live demo: http://jsfiddle.net/kkulig/1o4mr6jk/
It always adds a new drilldown series (with randomly generated data from the API) on point click event and performs drilldown.
In callback for series.point.events.click I used addSeriesAsDrilldown:
plotOptions: {
series: {
point: {
events: {
click: function(e) {
var point = this,
chart = point.series.chart;
$.getJSON('https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json&callback=?', function(data) {
chart.addSeriesAsDrilldown(point, {
data: data
});
});
}
}
}
}
},
You can use the value of point.name to construct your URL.
It seems that there's some issue with the core code - it throws an error on drillup (you can check that by commenting out everything before var chart = Highcharts.chart('container', {). this.ddDupes in H.Chart.prototype.drillUp function is undefined so its length property cannot be accessed. I modified the core code by changing the following piece of code:
this.ddDupes.length = []; // #3315
to this:
if (this.ddDupes) {
this.ddDupes.length = []; // #3315
}
and everything works fine.
EDIT
I found a better solution. It's based on the official Highcharts demo referred in the API record for chart.events.drilldown: https://api.highcharts.com/highcharts/chart.events.drilldown
Live demo: http://jsfiddle.net/kkulig/u1z5z40b/
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function(e) {
var chart = this;
$.getJSON('https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json&callback=?', function(data) {
chart.addSeriesAsDrilldown(e.point, {
data: data
});
});
}
}
},
series: [{
data: [{
name: 'John',
y: 1,
drilldown: true
}, 2],
}]
});
drilldown: true indicates that the drilldown event should happen even though there's no drilldown series explicitly assigned to the point yet.
I'm trying to make a simple bar chart that updates every 5 seconds using highchart. Below is my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="underscore-min.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
<script>
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Activity Count per Model'
},
xAxis: {
categories: [],
crosshair: true,
title: {
text: 'Model'
}
},
yAxis: {
min: 0,
title: {
text: 'Activity Count'
}
},
plotOptions: {
column: {
animation: true,
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Count',
data: []
}]
});
setInterval(function(){
$.getJSON("http://localhost/getdata.php", function(data){
$('#container').highcharts().series[0].setData(data.value,true);
$('#container').highcharts().xAxis[0].setCategories(data.model);
});
}, 5000);
</script>
</html>
The data returned from JSON call:
{"model":["a","aa","aaa","aaaa","aab","b","c","d","e"],"value":[40,20,70,40,70,20,30,40,50]}
Right now functionally the code works fine (chart shows up with the data updated every 5 second). The problem is that if the chart updates with new column, there's no animation on it. But if the existing data is updated without adding new column, there's animation in it (column growing up / shrinking, other column adjust if axis change). How do I enable the animation when new column is inserted into the chart?
In that case there are different possibilities how the chart should be animated. So you should consider what animation you'd want to.
From setData() docs:
When the updated data is the same length as the existing data, points will be updated by default, and animation visualizes how the points are changed.
IN your case you can split your data in two parts - the new point and the rest data. The rest data can be set with setData() - and you will preserve the animation because the old and new data have same length. And the point can be added with animation via addPoint().
$('#button').click(function () {
const data = new Array(12).fill(2)
chart.xAxis[0].setCategories(categories.concat('13'), false);
chart.series[0].setData(data);
chart.series[0].addPoint(40, true, false, true);
});
example: http://jsfiddle.net/Lqy2e42h/