I am new to programming language so please consider my poor knowledge. Basically i am trying to use Highcharts for my project which takes data from a csv data source.
please take a look at:
flood forcast data
The chart shows 10 days flood forcast for a particular place. I want to have the ability to disable a data series by default, so that when you click on its legend item it shows, instead of hides. This will give me the ability to put many series on one graph, only show the Important ones, while allowing users to show additional series if they need. as an example: on load it will have day1, day3 and day5 "visible: true" and rest "visible: false." hope i made it clear
here goes my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.js"> </script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" />
<title>Flood Forecast</title>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$.get('data.csv', function(csv) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type:'spline'
},
rangeSelector: {
selected: 1,
inputDateFormat: '%Y-%m-%d'
},
title: {
text: 'Flood Forcast'
},
legend: {
enabled: true,
align: 'right',
verticalAlign: 'middle',
layout: 'vertical',
borderColor: 'black',
borderWidth: 0.5,
itemDistance: 0
},
// data
data: {
csv: csv
},
}, function(chart) {
// apply the date pickers
setTimeout(function() {
$('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()
}, 0)
});
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText) {
this.onchange();
this.onblur();
}
});
});
</script>
</head>
<body>
<div id="container" style="height: 600px; min-width: 600px"></div>
</body>
</html>
Thanks in advance.
You can do this with the visible property, just add to your options:
series: [{
visible: false
}, {
visible: true
}]
series represents your array of series, in this example has two series, the first hidden and the second visible. You can check this fiddle that uses data csv too:
http://jsfiddle.net/u4yaxk58/
Hope it helps!
Related
i need to do this effect in my project but i've no idea about it. Can you help me?
I've created the chart, but the effects i don't know to do.
Here is the real case:
https://statusinvest.com.br/acoes/egie3
I've created the chart:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./dist/echarts.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'VARIAÇÃO DE ENTRADA DE NOTA'
},
tooltip: {
},
legend: {
data: ['Valor']
},
xAxis: {
data: ["01/08/20", "05/08/20", "15/08/20", "30/08/20", "02/09/20", "01/10/20"]
},
yAxis: {
},
series: [{
name: 'Valor',
type: 'line',
data: [19.99, 20.5, 21.6, 18.6, 15.1, 22.5],
tension
}]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
</body>
</html>
If somebody knows how to do this effect in chart.js, it's valid.
Thanks!
I wrote a php script with target to use $.getJSON() function.#
The live-temp-data.php create an json file with data like this:Data
This is the result : linechart
what am I doing wrong ? Code below.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Highcharts Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("live-temp-data.php", function(json) {
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'steinhagen-wetter.de'
},
subtitle: {
text: '2020'
},
yAxis: {
title: {
text: 'Temperature(°C)'
}
},
time:{
timezone: 'Europe/ Berlin'
},
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
hour: '%H:%M',
},
},
series: [{
name: 'Outside Temp °C',
data: json
}]
});
});
});
});
</script>
</head>
</html>
1) Open the web console, and you will see the following message :
https://www.highcharts.com/errors/25/
If you browse this page, you will have the error message :
Can't find Moment.js library
Using the global.timezone option requires the Moment.js library to be
loaded.
So import that library, or remove this option, and that problem should be solved.
2) your HTML document is invalid, everything is in the head section, you should have a body section that contains your graph container.
3) your JSON is not valid : ["[1584713222000, 6.5]","[1584713572000, 6.6]","[1584713989000, 6.7]", ...
You should not have quotes around the data items.
I have been trying to add a number on the inside of the "Simple donut chart" from ApexCharts. This is the link to it - https://apexcharts.com/javascript-chart-demos/pie-charts/simple-donut/ .
To use the chart, I ran the command "npm install apexcharts --save" in my project terminal.
This is my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./Chart.css">
<script src="./Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<div id="chart"></div>
<script>
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</html>
This is my CSS file:
#chart{
width:400px;
height:400px;
margin-left: auto;
margin-right: auto;
}
This is what I used in my JavaScript file:
var options = {
series: [44, 55, 41, 60],
labels: ["Transport", "Shopping", "Energy use", "Food"],
chart: {
type: 'donut',
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
This is the result of the code mentioned above:
Current Chart
This is a model to show how I would like the number to be displayed:
Example Chart
I would like to know if its possible to add a number inside the current chart with ApexCharts as the example chart shows.
Yes it's possible.
let options = {
series: [44, 55, 41, 60],
labels: ["Transport", "Shopping", "Energy use", "Food"],
chart: {
type: 'donut',
},
plotOptions: {
pie: {
donut: {
labels: {
show: true,
total: {
show: true,
label: '',
formatter: () => 'Text you want'
}
}
}
}
}
};
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts#3.18.1/dist/apexcharts.min.js"></script>
<div id="chart"></div>
You can show the following information inside a donut:
a value of an individual donut piece (on hover to that piece)
the total of all the donut pieces
custom text
Try to change values of the total object properties to better understanding what I mean. More detailed information is here
I'm trying to create column chart using data imported from csv file. I have tried every possible solution on the Internet but couldn't figure out the solution to my problem. I'm trying to show Shop Name on x-axis and Sales on y-axis.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
body{
margin-top: 30px;
margin-left:40px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.5/papaparse.js"></script>
</head>
<body>
</div>
<div id="container" style="height: 400px"></div>
<script type="text/javascript">
$(function () {
$.get('stores.csv', function(csvdata) {
var data = Papa.parse(csvdata);
$('#container').highcharts({
chart: {
type: "column"
},
title: {
text: "Sales Analysis"
},
xAxis: {
ShopName: []
},
yAxis: {
title: {
text: "Sales"
}
},
data: {
csv: data
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
}
});
});
});
</script>
</body>
</html>
csv file(stores.csv):
Longitude,Latitude,ShopName,ShopAddress,Sales
73.2350874,34.1990918,Abbotaqbad Civic Shopping Center,Mansehra Road Mandian,29719
74.3062887,31.5673136,Anarkali 1 9 - Babar Market,Anarkali,14212
74.3040372,31.5643123,Anarkali 263 - Babar Market,Anarkali,35928
74.4559979,31.5931715,Baghbanpura 239 - G T Road,Baghbanpura,49901
This is just to give you an example of how you can plot chart with Highchart while parsing .csv data. Code is simple and self explanatory.
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$.get('stores.csv', function(data) {
var lines = data.split('\n');
console.log(lines);
var shopNameData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
{
shopNameData[lineNo-1] = lineContent.split(',')[2];
}
});
var salesData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
{
salesData[lineNo-1] = parseFloat(lineContent.substring(lineContent.lastIndexOf(",")+1) );
}
});
console.log(shopNameData);
console.log(salesData);
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Sales Analysis'
},
subtitle: {
text: 'put subtitle here'
},
xAxis: {
categories: shopNameData,
crosshair: false
},
yAxis: {
min: 0,
title: {
text: 'Sales (in Rupees)'
}
},
tooltip: {
headerFormat: '<b>Shopname:</b> {point.x}<br/>',
pointFormat: '<b>{series.name}:</b> {point.y}<br/>'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Sales',
data: salesData
} ]
});
});
</script>
</body>
</html>
.csv file used is:
Longitude,Latitude, ShopName,ShopAddress,Sales
73.2350874,34.1990918,Abbotaqbad Civic Shopping Center,Mansehra Road Mandian,29719
74.3062887,31.5673136,Anarkali 1 9 - Babar Market,Anarkali,14212
74.3040372,31.5643123,Anarkali 263 - Babar Market,Anarkali,35928
74.4559979,31.5931715,Baghbanpura 239 - G T Road,Baghbanpura,49901
Points to be noted
Note that in .csv there are no space after comma, so .csv must follow that or you have to edit the logic to form shopNameData and salesData
Host both .html and .csv at one place in some server. Otherwise, in Google Chrome, you will get CrossOrigin error.
Here is the snapshot of Chart if you will copy the html and name the .csv as stores.csv in same directory of html and host in some server.
I'm trying to use highcharts to visualize some numbers out of my database :)
After fetching them from the db I'm encoding the outcome (currently 2 categories) as JSON:
Name
Category
Data
[{"name":"Something 1","category":["2014-07-13 00:00:00","2014-07-13 01:00:00","2014-07-13 02:00:00","2014-07-13 03:00:00","2014-07-13 04:00:00","2014-07-13 05:00:00","2014-07-13 06:00:00","2014-07-13 07:00:00","2014-07-13 08:00:00","2014-07-13 09:00:00","2014-07-13 10:00:00","2014-07-13 11:00:00","2014-07-13 12:00:00","2014-07-13 13:00:00","2014-07-13 14:00:00","2014-07-13 15:00:00","2014-07-13 16:00:00","2014-07-13 17:00:00","2014-07-13 18:00:00","2014-07-13 19:00:00","2014-07-13 20:00:00","2014-07-13 21:00:00","2014-07-13 22:00:00","2014-07-13 23:00:00"],"data":[1,1,0,1,0,0,0,1,0,0,7,6,3,4,4,10,8,9,7,12,5,8,2,0]},{"name":"Something 2","category1":["2014-07-13 00:00:00","2014-07-13 01:00:00","2014-07-13 02:00:00","2014-07-13 03:00:00","2014-07-13 04:00:00","2014-07-13 05:00:00","2014-07-13 06:00:00","2014-07-13 07:00:00","2014-07-13 08:00:00","2014-07-13 09:00:00","2014-07-13 10:00:00","2014-07-13 11:00:00","2014-07-13 12:00:00","2014-07-13 13:00:00","2014-07-13 14:00:00","2014-07-13 15:00:00","2014-07-13 16:00:00","2014-07-13 17:00:00","2014-07-13 18:00:00","2014-07-13 19:00:00","2014-07-13 20:00:00","2014-07-13 21:00:00","2014-07-13 22:00:00","2014-07-13 23:00:00"],"data":[1,1,1,1,0,0,0,0,2,1,4,2,3,2,4,3,4,6,3,5,3,5,2,1]}]
which is later be used by my example.html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Diagram</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Something and Anything',
x: -20 //center
},
subtitle: {
text: 'bla bla bla',
x: -20
},
xAxis: {
categories: [],
labels: {
align: 'center',
x: -3,
y: 30,
formatter: function() {
return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC'));
}
}
},
yAxis: {
title: {
text: 'Orders'
},
plotLines: [{
value: 0,
width: 0,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +':00 => '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
y: 100,
borderWidth: 0
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- Bla Bla Bla Highcharts Container -->
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
so far so good - what I finally want to add is the possibility of adding a datepicker now.
My "data.php" file is already able to handle a "Date" Parameter:
data.php?dateParam=2014-05-08
But still I'm not finding a valid way to add the datepicker into my code.
Also wanted to let you know that I'm pretty new to JS and aware of the fact
that this script could have been written way better...
So long and thanks for all the cheese,
Jo3rg
A few tips
if you use categories, dateFormat will not work, it is based on timestamp
you should set type of xAxis (i.e category) or datetime
if you use datetime, your dates should be parsed to timestamp (Date.UTC functon or Date.parse()
in the series you should define which data is used, becuase your json is invalid (incorrect structure for highcharts)