I need to implement this https://www.highcharts.com/demo/line-time-series, but that needs data like these https://cdn.jsdelivr.net/gh/highcharts/highcharts#v7.0.0/samples/data/usdeur.json, 1167868800000 is a datetime date format but I do not know how to pass my datatime to this format
I need to convert this date 2019-04-02 21:35:04 -0600 to this 1167868800000
How could I solve this? I'm working on ruby on rails
You can use momentjs to convert your date to epoch time.
Here is a sample.
var ADBE = [
['2019-04-02 21:35:04',23.17],
['2019-04-02 22:35:04',23.78],
['2019-04-02 23:35:04',24.10],
['2019-04-03 20:35:04',23.86],
['2019-04-03 21:35:04',24.54]
];
ADBE = ADBE.map(function(data) { return [moment(data[0], "YYYY-MM-DD HH:mm:ss").valueOf(), data[1]]});
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 100
},
series: [{
name: 'ADBE',
data: ADBE
}]
});
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/three-series-1000-points.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
Related
i am new in ColdFusion and i want to do highcharts in coldFusion.
I have code like to below to display my pie chart but i dunno why it cannot be displayed. I edit it based on the example in the higcharts demo.
<cfscript>
categories = [{name='Jane',y=13},{name='John',y=23},{name='Joe',y=19}];
</cfscript>
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data:<cfoutput>#categories#</cfoutput>
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>
So in your example you create a ColdFusion array of structs here:
<cfscript>
categories = [{name='Jane',y=13},{name='John',y=23},{name='Joe',y=19}];
</cfscript>
When you pass that data to Highcharts you are outputting the ColdFusion array here:
data:<cfoutput>#categories#</cfoutput>
This will not work. The ColdFusion array is a complex variable so you can't just output it like that. If you view the source of your page you'll probably see a ColdFusion error. Try this instead:
data:<cfoutput>#serializeJSON(categories)#</cfoutput>;
That will convert your ColdFusion array into JSON, which the JavaScript can read and understand. For example:
[{"Y":13,"NAME":"Jane"},{"Y":23,"NAME":"John"},{"Y":19,"NAME":"Joe"}]
Note that the keys are uppercase - this is because ColdFusion by default uses uppercase keys. If you need lowercase keys, then when you create the ColdFusion array of structs, quote the keys. For example:
<cfscript>
categories = [{'name'='Jane','y'=13},{'name'='John','y'=23},{'name'='Joe','y'=19}];
</cfscript>
This will output JSON which looks like this:
[{"y":13,"name":"Jane"},{"y":23,"name":"John"},{"y":19,"name":"Joe"}]
I'm trying to duplicate the Highmaps Demos › Map bubble except that I want to add other charts to the same page. When I load the Highcharts script and the Highmaps module script, the chart doesn't render. The browser throws a generic error. See jsfiddle for the example.
https://jsfiddle.net/hkjbn6wg/1/
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function (data) {
var mapData = Highcharts.geojson(Highcharts.maps['custom/world']);
// Correct UK to GB in data
$.each(data, function () {
if (this.code === 'UK') {
this.code = 'GB';
}
});
$('#container').highcharts('Map', {
chart : {
borderWidth : 1
},
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',
mapData: mapData,
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
mapData: mapData,
name: 'Population 2013',
joinBy: ['iso-a2', 'code'],
data: data,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.code}: {point.z} thousands'
}
}]
});
});
});
The error is printed, because you miss highcharts-more.js file.
Add the reference to this file and example will work.
<script src="http://code.highcharts.com/highcharts-more.js"></script>
http://jsfiddle.net/hkjbn6wg/2/
I am trying to create a polymer custom element to display a Highchart and getting this error:
'Highcharts Error #13 Rendering div not found
This error occurs if the chart.renderTo option is misconfigured so that Highcharts is unable to find the HTML element to render the chart in.'
Can anyone please explain how to load the chart into the template div id="container"? Any links to working highcharts/polymer elements greatly appreciated :)
My code (I'm using polymer starter kit so linking to polymer/webcomponents from the elements.html and have in index.html):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<dom-module id="my-chart">
<template>
<div id="container" style="max-width: 600px; height: 360px;"></div>
</template>
<script>
Polymer({
is: "my-chart",
ready: new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'container'
},
title: {text: 'HI'},
xAxis: {
categories: ['London', 'Paris', 'Madrid']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Cities',
data: [1000, 2500, 1500]
}]
})
});
</script>
</dom-module>
New code:
<dom-module id="my-chart">
<template>
<div id="container" style="max-width: 600px; height: 360px;"></div>
</template>
<script>
Polymer({
is: "my-chart",
ready: function() {
var el = new Highcharts.Chart
({
chart: {
type: 'bar',
// renderTo: 'container'
},
title: {text: 'HI'},
xAxis: {
categories: ['London', 'Paris', 'Madrid']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Cities',
data: [1000, 2500, 1500]
}]
})
this.$.container.appendChild(el);
}
});
</script>
</dom-module>
Try, to use
ready: function() {
var el = new Highcharts.Chart({.....});
//selector for element with id container
this.$.container.appendChild(el);
}
I got the chart loading like this, thanks for help:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<dom-module id="bar-chart">
<template>
<div id="container" style="max-width: 600px; height: 360px;"></div>
</template>
<script>
Polymer({
is: "bar-chart",
ready: function () {
$(this.$.container).highcharts({
chart: {
type: 'bar',
renderTo: 'container'
},
title: {text: 'HI'},
xAxis: {
categories: ['London', 'Paris', 'Madrid']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Cities',
data: [1000, 2500, 1500]
}]
})
}
});
</script>
</dom-module>
Hey you can use Highchart-Chart to do the same thing.
<!-------------------------------------|
Normal Import is done the way below:
<link rel="import" href="bower_components/highcharts-chart/highcharts-chart.html">
For the sake of a demo I will use a CDN
--------------------------------------->
<link rel="import" href="https://user-content-dot-custom-elements.appspot.com/avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/highcharts-chart.html">
<highcharts-chart type="bar" x-axis='{"categories": ["London","Paris","Madrid"]}' title="Hi" x-label="Cities" data='[1000,2500,1500]' y-label="Sales"></highcharts-chart>
Click Run code snippet to see the chart!
That's it! There are more examples here with real-time data.
I'm adding this answer since I could not find this solution anywhere else and unfortunately the Highchart-Chart package with Polymer 1.x did not work for me either.
I noticed that the element was being created/rendered, but it wasn't being properly appended to the custom Polymer element (e.g. my-chart).
The only way that worked was to use this.appendChild(this.$.container); after creating the Highchart.
Your code would then be:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<dom-module id="my-chart">
<template>
<div id="container" style="max-width: 600px; height: 360px;"></div>
</template>
<script>
Polymer({
is: "my-chart",
ready: new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: this.$.container // Renders to div#container in this module only
},
title: {text: 'HI'},
xAxis: {
categories: ['London', 'Paris', 'Madrid']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Cities',
data: [1000, 2500, 1500]
}]
})
});
this.appendChild(this.$.container); // Add highcharts to Polymer element DOM
</script>
</dom-module>
NOTE: Highcharts.chart({...}) did not need to be stored to a variable.
This should avoid the param 1 is not Node error.
I am trying to use highcharts to build a charts. I have the below code:
my data.json file looks like this:
{"DATETIME":[1369540800,1369541700,1369542600,1369543500,1369544400,1369545300,1369546200,1369547100,1369548000,1369548900],"CPU":[14.84,13.6333333333333,14.7666666666667,13.5333333333333,17.8666666666667,15.9333333333333,14.2333333333333,13.3,10.8333333333333,9.76666666666667]}
HIGHTCHARTS
<style>
body
{
font: 10px arial;
}
</style>
<script src="jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON('data.json', function(data) {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'CPU UTILIZATION'
},
xAxis: {
categories: ['Date']
},
yAxis: {
title: {
text: '% CPU Utilization'
}
},
series: [{
data: data,
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
I dont see any values, dada.json file is in the same directory as index.html file. Any ideas what I am missing here?
Your JSON should have data name instead of datetime. Morever I see only dates, not y values.
"DATETIME":
should be
"data":
When startOnTick and/or endOnTick are set to true for a datetime xAxis, dragging the navigator left and right expands it until it fills up the whole range of data.
See:
http://jsfiddle.net/L3t4s/2/
Duplicate code below:
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/usdeur.js"></script>
$(function() {
$('#container').highcharts('StockChart', {
chart: {
plotBorderWidth: 1
},
rangeSelector: {
selected: 4
},
xAxis: {
startOnTick: true,
endOnTick: true
},
series: [{
name: 'USD to EUR',
data: usdeur
}]
});
});
It's caused by real time redraws while dragging navigator. To prevent this set liveRedraw: false, see: http://jsfiddle.net/L3t4s/4/