I am generating one image using High-Charts library but i have 40000 polygon series so it takes lot of time in plotting all those points.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function () {
var options = {
chart :{
type: 'polygon',
renderTo: 'container',
zoomType:'x'
},
title: {
text: ''
},
yAxis: {
title: false,
gridLineWidth:0,
lineWidth:0,
labels:{
enabled: false
}
},
xAxis: {
title: false,
gridLineWidth:0,
lineWidth:0,
labels:{
enabled: false
}
},
plotOptions: {
series: {
lineWidth: 1,
lineColor:'black',
}
},
series: []
};
$.getJSON('data.json', function(data) {
options.series=data;
var chart = new Highcharts.Chart(options);
})
$.getJSON('title.json', function(title) {
options.title.text=title;
var chart = new Highcharts.Chart(options);
})
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://highcharts.base.is/highcharts-downsample.js"></script>
<script src="http://highcharts.base.is/demo_data.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
sample data.json file
[{"showInLegend": false,"color": "#FFFFFF", "data": [[61448208.5, 10791], [61453100.5, 20575], [61451242.5, 24291], [61446350.5, 14507]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453100.5, 20575], [61453544, 21462], [61451686, 25178], [61451242.5, 24291]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453544, 21462], [61453681.5, 21737], [61451823.5, 25453], [61451686, 25178]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453681.5, 21737], [61459631.5, 33637], [61457773.5, 37353], [61451823.5, 25453]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61459631.5, 33637], [61462023.5, 38421], [61460165.5, 42137], [61457773.5, 37353]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462023.5, 38421], [61462226, 38826], [61460368, 42542], [61460165.5, 42137]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462226, 38826], [61462340, 39054], [61460482, 42770], [61460368, 42542]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462340, 39054], [61462372.5, 39119], [61460514.5, 42835], [61460482, 42770]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462372.5, 39119], [61462429.5, 39233], [61460571.5, 42949], [61460514.5, 42835]] }
]
Is there any way to down sample multiple series to some 100's or create a mouse event on selection of area so that plot can regenerate plot based on coordinates and read chunk of json data within that range.
If your data sets sizes are 50,000 points and beyond, you can consider using the Highcharts Boost module, released in the beginning of 2017 if memory serves. There are some great examples, like this Highcharts line chart with 600,000 data points across 600 series.
You just include the highcharts Boost module, either directly in a separate tag, or if using NPM just import the boost module from the highcharts package:
import boost from 'highcharts/modules/boost'
Then, you can add some boost options in your Highcharts options object, as an example:
{
boost: {
useGPUTranslations: true
},
title: {
text: 'Highcharts Boost'
},
series: [{
boostThreshold: 1, // Boost when there are more than 1
// point in the chart.
data: [[0, 1], [1, 2], [2, 3]],
}]
};
I've found that module to be of great help as I'm working with multiple series of > 100,000 data points each and multiple charts on one page.
Related
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 am trying to find out why my chart is not showing up in my WPF WebBrowser.
When I load my html file, I have the following error:
I think that IE might be blocking Highchart(Javascript from external Source) in the WPF WebBrowser because when I try to load it with IE my page got restricted from running script or ActiveX Control :
I know how to allow IE to run script or ActiveX Control but I don't know how to allow it in my WPF WebBrowser.
I have tried with a Mark Of The Web but I'm not sure if i am using it properly ?
<!-- saved from url=(0016)http://localhost -->
I have also tried some desperate method like adding my program in :
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION\MyProgram.exe and MyProgram.vshost.exe with Value 0x00002af9
I would really appreciate some help.
I don't have find any answer that fix this problem so far.
My html file :
<!DOCTYPE HTML>
<!-- saved from url=(0016)http://localhost -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'spline',
inverted: true
},
title: {
text: 'Atmosphere Temperature by Altitude'
},
subtitle: {
text: 'According to the Standard Atmosphere Model'
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: 'Altitude'
},
labels: {
formatter: function () {
return this.value + 'km';
}
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 2
},
legend: {
enabled: false
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x} km: {point.y}°C'
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: 'Temperature',
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
</script>
</body>
</html>
UPDATE
Request : alert(navigator.userAgent);
Result :
Signification
SOLUTION
Without any change in my PC Security Configuration i fixed this problem by adding this in the header of my html file :
<meta http-equiv="x-ua-compatible" content="IE=11">
See Alexander Ryan Baggett Answer for more information or this link.
Okay, this works fine for me.
I added <meta http-equiv="x-ua-compatible" content="IE=11">. I also loaded the HTML file locally in visual studio by adding it to the project and setting it to copy always. I did not end up having to make any registry adjustments on my machine either.
C# file
using System;
using System.IO;
using System.Windows;
namespace Stackoverflow_question
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
string curDir = Directory.GetCurrentDirectory();
webbrowser1.Navigate(new Uri(String.Format("file:///{0}/test.html", curDir))) ;
}
}
}
HTML file
<!DOCTYPE HTML>
<!-- saved from url=(0016)http://localhost -->
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart("container", {
chart: {
type: "spline",
inverted: true
},
title: {
text: "Atmosphere Temperature by Altitude"
},
subtitle: {
text: "According to the Standard Atmosphere Model"
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: "Altitude"
},
labels: {
formatter: function () {
return this.value + "km";
}
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis: {
title: {
text: "Temperature"
},
labels: {
formatter: function () {
return this.value + "°";
}
},
lineWidth: 2
},
legend: {
enabled: false
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x} km: {point.y}°C"
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: "Temperature",
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
</script>
</body>
</html>
It gives a nice result too.
If this code doesn't resolve your issue. I would suspect something needs to be changed about your Local Intranet Security Zone settings.
How can I change the kendo ui graph configuration so that it draws line for each integer with considering "interpolate" for missing values. In the example, I wanted a line chart for all integers from 1 to 12 even though required data is not available in the data source.
Please note that, my datasource is dynamic and it can have around 1000 records.
dataSource = [{"measurementPoint":1,"data_1":10},{"measurementPoint":2,"data_1":22},{"measurementPoint":5.5,"data_1":5},
{"measurementPoint":7,"data_1":10},{"measurementPoint":10.06,"data_1":22},{"measurementPoint":12.2,"data_1":5}];
$("#chart").kendoChart({
dataSource: { data: dataSource },
seriesDefaults: {
type: "line",
markers: { visible: false }},
categoryAxis: [{
justified: true,
field: "measurementPoint",
labels: {
step:2,
format: "###",
visible:true },
majorGridLines: { visible: false },
majorTicks: { visible: false },
crosshair: { visible: false }
}],
series: [
{ field: "data_1", name: "Pressure" }
],
tooltip: {
visible: true,
shared: true
}
});
<html>
<head>
<title>Kendo Chart</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"> </div>
</body>
</html>
Use Scatter line chart instead of 'line' chart. 'Scatter line' chart properly scale chart with numeric x axis.
I have tried to create a column chart using highcharts in nodejs and data is getting fetched from mongodb.
I am getting stuck in series option Please help me to get out of it.
The below is my code for ejs file -
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pie Highcharts Example</title>
<!-- Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/highcharts.js"></script>
<!-- Optional: the exporting module -->
<script type="text/javascript" src="/javascripts/exporting.js"></script>
<!-- Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
chartdata= <%-JSON.stringify(data)%>
var category = [];
var dname=[];
var kdata=[];
for(j=0;j<chartdata.length;j++){
category[j]=[chartdata[j].catname]
// name[j]=[chartdata[j].seriesname]
// data[j]=[chartdata[j].wdata,chartdata[j].hdata,chartdata[j].cdata]
}
for(k=0;k<chartdata.length;k++){
dname[k]=[chartdata[k].seriesname];
}
for(i=0;i<chartdata.length;i++){
kdata[i] = [chartdata[i].wordval,chartdata[i].codeval,chartdata[i].highval];
}
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Monthly Average data'
},
xAxis: {
categories: category
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 40,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y ;
}
},
plotOptions: {
column: {
pointPadding: 0.3,
borderWidth: 0
}
},
series: [{
name: dname[0],
data: kdata[0]
},
{
name: dname[1],
data: kdata[1]
},
{
name: dname[2],
data: kdata[2]
}
]
});
});
</script>
</head>
<body>
<!-- Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
#NishithChaturvedi - When I am doing this way its working so only the problem with loop I know I am asking silly question but didn't able to rectify.
Thank you for your time I have fixed the problem I was facing in series value
I just created another array var and store the name and data to it and pass that array in series.
I am attempting to implement a custom interactive map using the Highcharts Maps JavaScript library (http://www.highcharts.com/maps/). I managed to get the map to appear on screen, but it far to small to view properly.
I took GeoJSON data for a map of Haiti with administrative boundaries.
The map is here: http://haitidata.org/layers/cnigs.spatialdata:hti_boundaries_communes_adm2_cnigs_polygon
This is a direct link to a GeoJSON file of the map data:
http://haitidata.org/geoserver/wfs?srsName=EPSG%3A4326&typename=cnigs.spatialdata%3Ahti_boundaries_communes_adm2_cnigs_polygon&outputFormat=json&version=1.0.0&service=WFS&request=GetFeature
Here is my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" type='text/css' href="css/normalize.css" type="text/css">
<link rel="stylesheet" type='text/css' href="css/main.css" type="text/css">
<link rel="stylesheet" type='text/css' href="css/responsive.css" type="text/css">
<!-- start JavaScript includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="js/haiti.js"></script> }
<!-- end JavaScript includes -->
</head>
<body>
<div id="container">
</div>
<p>This is some text.</p>
</body>
</html>
This is the content of haiti.js, a JavaScript file with the code to initialize the map:
$(function () {
// Prepare random data
var data = [
{
"id_dept": 1,
"value": 5000
},
{
"id_dept": 2,
"value": 10000
},
{
"id_dept": 3,
"value": 15000
},
{
"id_dept": 4,
"value": 20000
},
{
"id_dept": 5,
"value": 25000
},
{
"id_dept": 6,
"value": 30000
},
{
"id_dept": 7,
"value": 40000
},
{
"id_dept": 8,
"value": 5000
},
{
"id_dept": 9,
"value": 60000
},
{
"id_dept": 10,
"value": 70000
},
];
$.getJSON('js/haiti.json', function (geojson) {
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoom: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
},
series : [{
data : data,
mapData: geojson,
joinBy: ['id_com', 'id_dept'],
name: 'Random data',
dataLabels: {
enabled: true,
format: '{point.properties.id_com}'
}
}]
});
});
});
I have placed the GeoJSON data of the map in a separate file titled haiti.json. See link at top of question.
What I am doing wrong? The map is being displayed far too small and I am not able to click and zoom in on it.
Here is a screenshot of what is displayed on my screen. The container for the map should be 500px by 500px, so the map is showing up much small at just a few pixels width and height.
https://www.dropbox.com/s/844030r2o395zea/Screenshot%202014-08-01%2023.15.50.png
You can use maps from javascript and then use data module to add data to your map, like in the example: http://jsfiddle.net/X85CS/3/
var mapData = Highcharts.geojson(Highcharts.maps['countries/ht/ht-all']);
var data = [{
"value": 1438,
"code": "OU"
}];