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'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>
Generally speaking, will a chart that reads embedded JSON also read a JSON file?
For example, my current chart looks like this:
anychart.onDocumentReady(function() {
chart = anychart.fromJson({
chart: {
type: "line",
series: [{
seriesType: "spline",
data: [{
x: "January",
value: 10000
}, {
x: "February",
value: 12000
}, {
x: "March",
value: 18000
}]
}],
container: "container"
}
}).draw();
});
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<div id="container"></div>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
Now, instead of the JSON being embedded, it's in a file called myData.json. Will that chart read the JSON file? Or does that depend on the chart?
Original post:
As you can see at the following example, the same data can be stored to an Object named data and then create the chart by using chart = anychart.fromJson(data).draw();
Since you want to get this data from a json file, you will have to use something like this: How to get JSON from URL in Javascript?
$.getJSON('http://your_json_url', function(data) {
anychart.fromJson(data).draw();
});
anychart.onDocumentReady(function() {
data = {
chart: {
type: "line",
series: [{
seriesType: "spline",
data: [{
x: "January",
value: 10000
}, {
x: "February",
value: 12000
}, {
x: "March",
value: 18000
}]
}],
container: "container"
}
}
chart = anychart.fromJson(data).draw();
});
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<div id="container"></div>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
Edit - working example:
file: test_data.json (take it as it is)
{
"chart": {
"type": "line",
"series": [{
"seriesType": "spline",
"data": [{
"x": "January",
"value": 10000
}, {
"x": "February",
"value": 12000
}, {
"x": "March",
"value": 18000
}]
}],
"container": "container"
}
}
file: index.html (modify the url of the json file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
$(document).ready(function(){
$.getJSON('http://localhost/json_chart_test/test_data.json', function(data) {
console.log(data);
anychart.fromJson(data).draw();
});
});
</script>
I'm trying to display category labels on the x-axis on a bar chart but can't work out how to do this. Here's the HTML and JS:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="chart"></div>
<script src="js/thirdParty/jquery.js"></script>
<script src="js/thirdParty/kendo.all.min.js"></script>
<script>
$(function () {
$("#chart").kendoChart({
legend: {
visible: false
},
seriesDefaults: {
type: "column"
},
series: [{
name: "Category A",
data: [5]
}, {
name: "Category B",
data: [20]
}, {
name: "Category C",
data: [10]
}],
})
});
</script>
</body>
</html>
The following screen shot highlights in a red box where I am trying to put the labels:
Any help would be appreciated.
In your case, you have provided 3 series. if you were intention was to create single series with three different X plot points, then the right way to do that is as below:
$("#chart2").kendoChart({
legend: {
visible: true
},
seriesDefaults: {
type: "column"
},
series: [{
data: [5,10,20]
}],
categoryAxis: [{
categories: ["Category A", "Category B","Category C"]
}]
});
What I have done is - I have said that Xaxis will have 3 plot points and the series contains a single array data with 3 y plot points.
here is the JSBin - http://jsbin.com/aroquki/1/edit
Hope this helps.
You see, this example will solve your problem.
JSbin Code
Document kendo Chart