HighChart- Plot Stacked Bar Chart on Status for Every Minute - javascript

I am trying to plot a Stacked bar chart on every minute(24 hours) status change of a process, i.e. Running or Stop.
Chart is having only y-axis with series in milliseconds. But It does not seems to plot the data as expected.
The data which is coming is like below:
19 x job process Stop NULL 2020-07-14 03:01:02.137 NULL
20 x job process Running NULL 2020-07-14 03:02:02.137 NULL
21 x job process Running NULL 2020-07-14 07:00:00.000 NULL
22 x job process Running NULL 2020-07-14 07:01:00.000 NULL
23 x job process Running NULL 2020-07-14 07:02:00.000 NULL
24 x job process Running NULL 2020-07-14 07:03:00.000 NULL
25 x job process Running NULL 2020-07-14 07:04:00.000 NULL
26 x job process Stop NULL 2020-07-14 07:05:00.000 NULL
27 x job process Running NULL 2020-07-14 07:06:00.000 NULL
28 x job process Running NULL 2020-07-14 07:07:00.000 NULL
29 x job process Running NULL 2020-07-14 07:08:00.000 NULL
Wher x is the job name and Running and stop is state. I am filtering this data in javascript to create my data series for chart, which is below:
data.forEach((element)=>{
if(element.State=="Running"){
var datetime = moment(element.CreatedDateTime).utc().valueOf();
statusSuccess.push(datetime)
}
else{
var datetime = moment(element.CreatedDateTime).utc().valueOf();
statusFailure.push(datetime)
}
});
The chart plotting and options creation is below:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "24 Hrs Status Variation For: "+this.resoucreName
},
credits: {
enabled: false
},
xAxis: {
},
yAxis: {
min:moment().subtract(1, 'days').utc().valueOf(),
dateTimeLabelFormats: {
second: '%A, %b %e, %H:%M:%S',
minute: '%A, %b %e, %H:%M',
hour: '%A, %b %e, %H',
day: '%H:%M:%S',
week: '%H:%M:%S',
month: '%H:%M:%S',
year: '%H:%M:%S'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:%A, %b %e, %H:%M:%S}</b><br/>',
shared: true
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'Success',
color:'#6FF3A3',
data: statusSuccess,
type: undefined,
},
{
name: 'Failed',
color:'#FF386C',
data: statusFailure,
type: undefined,
}
]
});
Below is the chart I am getting:
Fiddle
But I am expecting like :
ExpectedFiddle


An X-Range plot would (as you also mentioned in your comment) best suit the situation as it can be used to diplay alternating states which can't be done with a stacked bar chart.
You first iterate over all job states and on state change ("running -> stop" / "stop -> running") you add the timestamps of start and end to a new array. Then add this array as the data property to the chart.
Remark: if you want to extend the last element to now you will have to add another element to the chart series array with the latest entry.datetime as "x" and new Date().getTime() as "x2".
var data = [{
"id": 19,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:01:02.137"
},
{
"id": 20,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:01:02.137"
},
{
"id": 21,
"name": "x",
"type": "job",
"state": "Stop",
"datetime": "2020-07-14 03:02:02.137"
},
{
"id": 22,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:03:02.137"
},
{
"id": 30,
"name": "x",
"type": "job",
"state": "Stop",
"datetime": "2020-07-14 03:04:02.137"
},
{
"id": 31,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:05:02.137"
},
{
"id": 32,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:06:02.137"
},
{
"id": 33,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:07:02.137"
},
{
"id": 34,
"name": "x",
"type": "job",
"state": "running",
"datetime": "2020-07-14 03:08:02.137"
},
{
"id": 35,
"name": "x",
"type": "job",
"state": "stop",
"datetime": "2020-07-14 03:09:02.137"
}
];
let latestMode = false;
let startTime = false;
let seriesData = [];
for (let entry of data) {
if (!latestMode) {
latestMode = entry.state;
startTime = new Date(entry.datetime);
} else if (latestMode !== entry.state) {
let currentTime = new Date(entry.datetime);
seriesData.push({
x: startTime.getTime(),
x2: currentTime.getTime(),
y: latestMode === 'running' ? 0 : 1
});
startTime = currentTime;
latestMode = entry.state;
}
}
Highcharts.chart('container', {
chart: {
type: 'xrange'
},
title: {
text: 'Job state'
},
accessibility: {
point: {
descriptionFormatter: function(point) {
var ix = point.index + 1,
category = point.yCategory,
from = new Date(point.x),
to = new Date(point.x2);
return ix + '. ' + category + ', ' + from.toDateString() +
' to ' + to.toDateString() + '.';
}
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
categories: ['Running', 'Stopped'],
reversed: true
},
series: [{
name: 'Job state',
// pointPadding: 0,
// groupPadding: 0,
borderColor: 'gray',
pointWidth: 20,
data: seriesData,
dataLabels: {
enabled: true
}
}]
});
#container {
height: 300px;
}
.highcharts-figure, .highcharts-data-table table {
min-width: 320px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
Here's also a fiddle with the above code


The chart is not plotted because the yAxis.min property is NaN:
yAxis: {
min: Date.UTC(yesterday),
...
}
Live demo: https://jsfiddle.net/BlackLabel/ps0L8cv9/
API Reference: https://api.highcharts.com/highcharts/yAxis.min

Related

Json data for apexcharts

I have some problems rendering some data from a JSON in my apexchart series.
Here is the example of my chart with the data that I want to be in my JSON, and i don't know how to write it.
var _seed = 42;
Math.random = function() {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
var options = {
series: [{
name: "Q",
data: [0, 4800, 9500, null],
},
{
name: "Q - 1",
data: [0, 6500, 12000, 16000]
},{
name: "Q Target",
data: [15500, 15500, 15500, 15500]
},
],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Clicks',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: [' ', 'Month1', 'Month2', 'Month3'],
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
#chart {
max-width: 450px;
margin: 35px auto;
}
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
If someone could give me a hint, is kindly appreciated.

The JSON looks like this , for retrieving data for the apexchart
{
"data_clicks":[
{
"name":"Q",
"data":[
{
"x":" ",
"y":0
},
{
"x":"Month1",
"y":2400
},
{
"x":"Month2",
"y":5200
},
{
"x":"Month3",
"y":null
}
]
},
{
"name":"Q - 1",
"data":[
{
"x":" ",
"y":0
},
{
"x":"Month1",
"y":1800
},
{
"x":"Month2",
"y":7150
},
{
"x":"Month3",
"y":10200
}
]
},
{
"name":"Q Target",
"data":[
{
"x":" ",
"y":11000
},
{
"x":"Month1",
"y":11000
},
{
"x":"Month2",
"y":11000
},
{
"x":"Month3",
"y":11000
}
]
}
],

ZingChart pie tooltip not displaying

I have a pie ZingChart I'm using to show simple data. It happens to be using angular and updates the series object as the user drills down.
Everything is working fine except...the tooltip does not display? It doesn't display at any point, regardless of interaction or series assignment. The standard mouseover highlights work, and clicking nodes is fine, but no tooltip. Any ideas? Can't work out what I'm missing!
My chart config is:
{
type: "pie",
id: 'chart-1',
title: {
textAlign: 'center',
text: "Loading..."
},
"legend":{
"border-width":1,
"border-color":"gray",
"border-radius":"5px",
"marker":{
"type":"circle"
},
"toggle-action":"remove",
"icon":{
"line-color":"#9999ff"
}
},
"plot": {
"animation":{
"on-legend-toggle": true,
"effect": 5,
"method": 1,
"sequence": 1,
"speed": 0.7
},
"value-box": {
"text": "$%v",
"negation": "currency",
"thousands-separator": ",",
"font-color": "black",
"placement":"in",
"offset-r":"50%",
"font-size":"12"
},
"tooltip":{
"text":"%t: %v (%npv%)"
},
"decimals": "0",
"detach": false
},
series: [],
shapes: [{
type: 'triangle',
backgroundColor: '#66ccff',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};

The - in chart-1 is causing an issue with our parse/selector process. If you change the id to chart_1 everything will work fine.
var myConfig = {
"graphset":[
{
"type":"pie",
"id":"chart_1",
"title":{
"textAlign":"center",
"text":"Loading..."
},
"legend":{
"border-width":1,
"border-color":"gray",
"border-radius":"5px",
"marker":{
"type":"circle"
},
"toggle-action":"remove",
"icon":{
"line-color":"#9999ff"
}
},
"plot":{
"animation":{
"on-legend-toggle":true,
"effect":5,
"method":1,
"sequence":1,
"speed":0.7
},
"value-box":{
"text":"$%v",
"negation":"currency",
"thousands-separator":",",
"font-color":"black",
"placement":"in",
"offset-r":"50%",
"font-size":"12"
},
"decimals":"0",
"detach":false
},
"tooltip":{
"text":"%t: %v (%npv%)"
},
"series":[
{
"values":[118],
"text":"0-30"
},
{
"values":[118],
"text":"0-30"
},
{
"values":[118],
"text":"0-30"
}
],
"shapes":[
{
"type":"triangle",
"backgroundColor":"#66ccff",
"size":10,
"angle":-90,
"x":20,
"y":20,
"cursor":"hand",
"id":"backwards"
}
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
</body>
</html>

Highchart and timeline does not work with large dataset

I have been working on a large dataset : http://jsfiddle.net/470bddfp/1/
It's about 2600 entries
I don't want to group data, but use zoomtype feature instead
Unfortunately it does not work, I just change selection, and I have empty data.
What is even worst, is when I use smaller dataset like I made in this exemple http://jsfiddle.net/470bddfp/2/ zoomtype is working !
$(function() {
var chart = new Highcharts.Chart({
chart: {
"renderTo": "container",
"zoomType": "x",
"panning": true,
"panKey": "shift"
},
plotOptions: {
"series": {
"states": {
"hover": {
"enabled": false
}
}
}
},
series: [{
"name": "First Timeline",
"type": "line",
"data": [
[1447608100000, 4.256],
[1447608070000, 4.471],
[1447608045000, 4.916],
[1447608042000, 2.946],
[1447608029000, 3.517],
[1447608003000, 5.801],
[1447607954000, 4.162],
[1447607924000, 2.415],
[1447607908000, 3.314],
[1447607898000, 2.765],
[1447607888000, 3.581],
[1447607861000, 7.016],
[1447607740000, 3.485],
[1447607719000, 4.264],
[1447607700000, 2.855],
[1447607694000, 3.142],
[1447607676000, 4.92],
[1447607613000, 2.899],
[1447607603000, 2.729],
[1447607594000, 4.054],
[1447607538000, 2.61],
[1447607526000, 2.43],
[1447607515000, 5.984],
[1447607467000, 2.529],
[1447607445000, 3.398],
[1447607391000, 4.9],
[1447607365000, 4.829],
[1447607310000, 2.935],
[1447607287000, 4.811],
[1447607242000, 4.897],
[1447607219000, 3.354],
[1447607157000, 5.929],
[1447607156000, 4.444],
[1447607128000, 6.542],
[1447607125000, 8.854],
[1447607121000, 5.693],
[1447607118000, 3.906],
[1447607092000, 2.843],
[1447607085000, 2.615],
[1447607076000, 2.651],
[1447607060000, 5.015],
[1447607057000, 2.441],
[1447607045000, 4.417],
[1447607015000, 5.198],
[1447607012000, 7.056],
[1447607006000, 4.014],
[1447606988000, 3.363],
[1447606965000, 2.329],
[1447606925000, 4.209],
[1447606922000, 4.095],
[1447606892000, 3.021],
[1447606879000, 4.54],
[1447606815000, 3.73],
[1447606783000, 7.097],
[1447606781000, 4.336],
[1447606732000, 2.786],
[1447606714000, 2.774],
[1447606675000, 6.027],
[1447606626000, 3.349],
[1447606576000, 3.147],
[1447606565000, 4.873],
[1447606518000, 4.064],
[1447606500000, 2.458],
[1447606484000, 2.601],
[1447606480000, 3.839],
[1447606429000, 5.348],
[1447606390000, 5.665],
[1447606287000, 7.904],
[1447606079000, 4.976],
[1447606055000, 5.577],
[1447606016000, 4.474],
[1447605931000, 5.43],
[1447605893000, 2.979],
[1447605889000, 6.101],
[1447605758000, 2.608],
[1447605757000, 5.77],
[1447605732000, 4.056],
[1447605701000, 5.834],
[1447605668000, 3.143],
[1447605665000, 2.924],
[1447605647000, 2.941],
[1447605631000, 3.544],
[1447605589000, 3.78],
[1447605566000, 7.102],
[1447605564000, 4.404],
[1447605563000, 5.95],
[1447605536000, 3.158],
[1447605499000, 2.618],
[1447605470000, 4.327],
[1447605456000, 4.384],
[1447605434000, 6.955],
[1447605307000, 3.632],
[1447605289000, 3.25],
[1447605276000, 3.711],
[1447605266000, 4.151],
[1447605224000, 4.985],
[1447605186000, 3.37],
[1447605163000, 2.553],
[1447605136000, 6.708],
[1447605042000, 6.076],
[1447604944000, 2.934],
[1447604923000, 6.721],
[1447604660000, 5.824],
[1447604608000, 4.777],
[1447604572000, 2.702],
[1447604560000, 3.34],
[1447604512000, 8.953],
[1447604509000, 7.409],
[1447604399000, 6.201],
[1447604327000, 2.912],
[1447604317000, 3.708],
[1447604280000, 4.575],
[1447604251000, 6.961],
[1447604248000, 3.878],
[1447604237000, 3.699],
[1447604232000, 4.066],
[1447604194000, 2.265],
[1447604182000, 4.943],
[1447604135000, 2.764],
[1447604132000, 7.494],
[1447603986000, 6.042],
[1447603983000, 3.071],
[1447603948000, 5.029],
[1447603887000, 7.517],
[1447603762000, 6.409],
[1447603758000, 4.375],
[1447603729000, 6.743],
[1447603584000, 2.78],
[1447603561000, 5.06],
[1447603536000, 5.109],
[1447603499000, 3.178],
[1447603433000, 6.729],
[1447603368000, 4.771],
[1447603278000, 4.775],
[1447603256000, 2.522],
[1447603242000, 6.729],
[1447603065000, 5.433],
[1447603016000, 3.842],
[1447602983000, 7.156],
[1447602780000, 7.057],
[1447602609000, 5.594],
[1447602566000, 6.967],
[1447602420000, 4.171],
[1447602345000, 5.094],
[1447602311000, 3.869],
[1447602293000, 4.59],
[1447602290000, 2.944],
[1447602271000, 6.146],
[1447602174000, 2.749],
[1447602161000, 2.713],
[1447602116000, 7.074],
[1447602065000, 3.175],
[1447602053000, 3.326],
[1447601987000, 3.973],
[1447601984000, 5.376],
[1447601933000, 3.106],
[1447601899000, 6.304],
[1447601822000, 2.749],
[1447601773000, 5.92],
[1447601650000, 7.701],
[1447601547000, 2.893],
[1447601532000, 3.036],
[1447601523000, 6.992],
[1447601392000, 7.213],
[1447601061000, 6.555],
[1447600809000, 5.283],
[1447600771000, 4.829],
[1447600748000, 2.75],
[1447600719000, 5.896],
[1447600632000, 4.905],
[1447600607000, 2.821],
[1447600583000, 2.98],
[1447600582000, 4.549],
[1447600568000, 4.821],
[1447600527000, 3.244],
[1447600521000, 6.498],
[1447600404000, 4.902],
[1447600380000, 5.754],
[1447600287000, 4.958],
[1447600250000, 3.106],
[1447600235000, 2.655],
[1447600231000, 3.266],
[1447600194000, 5.529],
[1447600152000, 4.377],
[1447600086000, 3.799],
[1447600083000, 3.085],
[1447600072000, 5.024],
[1447600036000, 4.372],
[1447600024000, 2.653],
[1447600024000, 3.836],
[1447600015000, 3.173],
[1447600007000, 5.187],
[1447599920000, 3.063],
[1447599914000, 3.986],
[1447599898000, 4.572],
[1447599817000, 4.282],
[1447599807000, 4.841],
[1447599802000, 4.515],
[1447599764000, 2.617],
[1447599749000, 2.932],
[1447599724000, 7.049],
[1447599720000, 4.841],
[1447599695000, 6.434],
[1447599692000, 3.248],
[1447599687000, 3.738],
[1447599680000, 4.174],
[1447599625000, 4.691],
[1447599575000, 3.657],
[1447599561000, 3.93],
[1447599506000, 7.645],
[1447599243000, 7.372],
[1447599242000, 5.109],
[1447599212000, 3.965],
[1447599188000, 3.358],
[1447599177000, 5.133],
[1447599177000, 2.737],
[1447599168000, 3.591],
[1447599104000, 3.627],
[1447599094000, 4.185],
[1447599079000, 4.75],
[1447599040000, 3.388],
[1447599029000, 2.608],
[1447599020000, 2.721],
[1447598998000, 3.548],
[1447598983000, 4.117],
[1447598967000, 3.311],
[1447598953000, 4.011],
[1447598911000, 3.208],
[1447598886000, 4.261],
[1447598878000, 5.554],
[1447598845000, 4.951],
[1447598783000, 4.79],
[1447598728000, 4.677],
[1447598665000, 3.013],
[1447598648000, 3.199],
[1447598630000, 5.953],
[1447598556000, 2.935],
[1447598549000, 3.082],
[1447598521000, 4.991],
[1447598493000, 5.14]
],
"tooltip": {
"valueSuffix": " secondes"
}
}],
title: {
"text": "Temps de r\u00e9ponse de RISe"
},
xAxis: [{
"type": "datetime",
"dateTimeLabelFormats": {
"hours": "%H:%M"
}
}],
yAxis: {
"labels": {
"format": "{value}s"
},
"title": {
"text": null
},
"min": 0,
"max": 9
},
});
});
I didn't found anything in documentation relating on limitations for zoomtype
Thanks by advance for any help

Code only works in jsfiddle

I have a problem with some code.
It only runs in jsfiddle and i dont know why it's not working in codepen or in files.
Why does this code only works in jsfiddle?
I tried it in codepen and just in files but it doesnt show anything
http://jsfiddle.net/auagufL8/
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/nl/nl-all.js"> </script>
<div id="container"></div>
$(function () {
// Prepare demo data
var data = [
{
"hc-key": "nl-fr",
"value": 0
},
{
"hc-key": "nl-gr",
"value": 1
},
{
"hc-key": "nl-fl",
"value": 2
},
{
"hc-key": "nl-ze",
"value": 3
},
{
"hc-key": "nl-nh",
"value": 4
},
{
"hc-key": "nl-zh",
"value": 5
},
{
"hc-key": "nl-dr",
"value": 6
},
{
"hc-key": "nl-ge",
"value": 7
},
{
"hc-key": "nl-li",
"value": 8
},
{
"hc-key": "nl-ov",
"value": 9
},
{
"hc-key": "nl-nb",
"value": 10
},
{
"hc-key": "nl-ut",
"value": 11
}
];
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Highmaps basic demo'
},
subtitle : {
text : 'Source map: The Netherlands'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series : [{
data : data,
mapData: Highcharts.maps['countries/nl/nl-all'],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}

Oh!
This code perfectly works everywhere.
To get it to work in Codepen, you need to add all your JS resources via the little cog inside JS panel, and check that Latest version of jQuery is selected. <script> tags are ignored in HTML panel.
$(function () {
// Prepare demo data
var data = [
{"hc-key": "nl-fr","value": 0},
{"hc-key": "nl-gr","value": 1},
{"hc-key": "nl-fl","value": 2},
{"hc-key": "nl-ze","value": 3},
{"hc-key": "nl-nh","value": 4},
{"hc-key": "nl-zh","value": 5},
{"hc-key": "nl-dr","value": 6},
{"hc-key": "nl-ge","value": 7},
{"hc-key": "nl-li","value": 8},
{"hc-key": "nl-ov","value": 9},
{"hc-key": "nl-nb","value": 10},
{"hc-key": "nl-ut","value": 11}
];
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Highmaps basic demo'
},
subtitle : {
text : 'Source map: The Netherlands'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series : [{
data : data,
mapData: Highcharts.maps['countries/nl/nl-all'],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
<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/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/nl/nl-all.js"></script>
<div id="container"></div>

To run code is a browser, you need to put it inside a <script> //Your code goes here </script> tag

this ->
#container {
height: 500px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
Is CSS, it must be inside a <style> tag.
this ->
$(function () {
// Prepare demo data
var data = [
{
"hc-key": "nl-fr",
"value": 0
},
{
"hc-key": "nl-gr",
"value": 1
},
{
"hc-key": "nl-fl",
"value": 2
},
{
"hc-key": "nl-ze",
"value": 3
},
{
"hc-key": "nl-nh",
"value": 4
},
{
"hc-key": "nl-zh",
"value": 5
},
{
"hc-key": "nl-dr",
"value": 6
},
{
"hc-key": "nl-ge",
"value": 7
},
{
"hc-key": "nl-li",
"value": 8
},
{
"hc-key": "nl-ov",
"value": 9
},
{
"hc-key": "nl-nb",
"value": 10
},
{
"hc-key": "nl-ut",
"value": 11
}
];
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Highmaps basic demo'
},
subtitle : {
text : 'Source map: The Netherlands'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series : [{
data : data,
mapData: Highcharts.maps['countries/nl/nl-all'],
joinBy: 'hc-key',
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
});
Is Javascript, it must be inside a <script> tag.

Put all your CSS related files either in a separate .css file or put it under tag in your HTML file. Also put all the scripts inside a .js file or embed it under tag in your HTML file.
for more reference you can visit this older post.

highcharts tooltip not working properly for hacked gantt chart

The tooltips for my hacked gantt chart using highcharts doesnt seem to be working properly. I used the gantt chart provided by the highcharts team from here-:
http://jsfiddle.net/highcharts/r6emu/
I am using UnixTime and that seems to be somehow throwing off the tooltips. Here-:
http://jsfiddle.net/bootkick/NFS5M/
// Define tasks
var tasks = [{
"name": "a",
"intervals": [{
"from": 1366005607000,
"to": 1366006490000
}]
}, {
"name": "b",
"intervals": [{
"from": 1366059607000,
"to": 1366061858000
}, {
"from": 1366056006000,
"to": 1366058223000
}, {
"from": 1366047007000,
"to": 1366049299000
}, {
"from": 1366034407000,
"to": 1366036682000
}, {
"from": 1366030808000,
"to": 1366033050000
}, {
"from": 1366027208000,
"to": 1366029512000
}, {
"from": 1366018209000,
"to": 1366021296000
}]
}, {
"name": "c",
"intervals": [{
"from": 1366018209000,
"to": 1366019966000
}]
}, {
"name": "d",
"intervals": [{
"from": 1366005607000,
"to": 1366047612000
}, {
"from": 1366002007000,
"to": 1366002202000
}]
}];
// re-structure the tasks into line seriesvar series = [];
var series = [];
$.each(tasks.reverse(), function (i, task) {
var item = {
name: task.name,
data: []
};
$.each(task.intervals, function (j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to
});
// add a null value between intervals
if (task.intervals[j + 1]) {
item.data.push(
[(interval.to + task.intervals[j + 1].from) / 2, null]);
}
});
series.push(item);
});
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Daily activities'
},
xAxis: {
type: 'datetime'
},
yAxis: {
tickInterval: 1,
labels: {
formatter: function () {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Activity'
},
minPadding: 0.2,
maxPadding: 0.2
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + tasks[this.y].name + '</b><br/>' + Highcharts.dateFormat('%H:%M', this.point.options.from) +
' - ' + Highcharts.dateFormat('%H:%M', this.point.options.to);
}
},
plotOptions: {
line: {
lineWidth: 9,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function () {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});
I am relatively new to Javascript and Highcharts so pardon the obvious if any.

I figured it out. The problem was that the from,to timestamp pairs within a name/category are not in the ascending order. For the tooltip to work correctly, they need to be in the ascending order which is kinda weird.

Categories

Resources