Flot line chart with categories not working - javascript

I have a flot chart with the following code:
var options = {
lines: {
show: true
},
points: {
show: true
},
xaxis: {
tickSize: 1,
mode: "categories"
}
};
var data = [];
data.push(
{"label": "Agrobiodiversity for consumption",
"data": [["January", 3.0], ["February", 3.9], ["March", 2.0], ["April", 1.2], ["May", 1.3], ["June", 2.5],
["July", 2.0], ["August", 3.1], ["September", 2.9], ["October", 0.9],["November", 0.5],["December", 1.8]]});
$.plot($("#flot-dashboard-chart"), data, options);
But I I get:
I have tried addigng the categories in the axis options but nothing seem to work.
Any idea what else do I need to add or what do I need to correct?


U can use my high chart, and u can remove unnecessary stuffs.
Demo with jsFiddle
var chart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
labels: {
formatter: function() {
var link_array = ["first", "second", "third", "fourth"];
i = 0;
if (this.value == 'Sugammadex and related compounds')
return '' + this.value + '';
if (this.value == 'Cyclodextrin enabled diclofenac injection (generic Dyloject)')
return '' + this.value + '';
if (this.value == 'Cyclodextrins in biological products')
return '' + this.value + '';
if (this.value == 'Cyclodextrins as a new class of antibiotics')
return '' + this.value + '';
},
useHTML: true
},
categories: ['Sugammadex and related compounds',
'Cyclodextrin enabled diclofenac injection (generic Dyloject)', 'Cyclodextrins in biological products',
'Cyclodextrins as a new class of antibiotics'
],
title: {
text: null
}
},
yAxis: {
labels: {
formatter: function() {
var x_text = ["", "Feasibility study", "Lead / formulation Optimization", "Product Development", "Final product"];
return x_text[this.value];
}
},
title: {
text: '',
align: 'high'
},
tickInterval: 1
},
tooltip: {
formatter: function() {
var x_text = ["", "Feasibility study", "Lead / formulation Optimization", "Product Development", "Final product"];
return x_text[this.y];
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
data: [1, 2, 3, 4]
}]
});
$(document).ready(function() {
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
window.location.hash = hash;
});
}
});
});


Well the "categories" mode is a plugin that need to be loaded in the HTML

Related

How to display data inside the script?

This is my current code, the problem is I dont know how to return the value, i dont know why the author from my function are undefined, what i want is to get the data from my query and pass it to the const reportChart, please help, thanks
this is my full code? did i miss something?
<script>
async function myFunction() {
var author = ("SELECT name FROM People", 10, (value)=>{
console.log(value)//please see the data below
return value;
})
return author; //undefined
}
myFunction().then(function(value){reportChart(value);})
const reportChart = (value) => {
console.log("inside chart: ",value) //The value of value is undefined
$("#chart").kendoChart({
title: {
text: "School Library"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [1, 2, 3]
}, {
name: "Total Visits",
data: [1, 2, 3]
}],
valueAxis: {
max: 10,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
}
},
categoryAxis: {
categories: [value],//undefined
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(reportChart);
$(document).bind("kendo:skinChange", reportChart);
</script>
the result of console.log(value)
0: ['Mark'] 1: ['Joseph'] 2: ['Luna'] 3: ['Yuno']
Update
I remove some code and replace this
<script>
let myPromise = new Promise(function(myResolve, myReject){
var author = ("SELECT name FROM People", 10, (value) => {
return myResolve(value)
});
})
myPromise.then(
function(value) {reportChart(value);},
function(error) {reportChart(error);}
);
function reportChart (value, index) {
console.log(index, value.length)
var i = 0
var author= []
for(i=0; i<=value.length; i++)
{
author[i] = value[i]
}
$("#chart").kendoChart({
title: {
text: "Library"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [1,2,3,4]
}, {
name: "Total Visits",
data: [4,5,6,7]
}],
valueAxis: {
max: 10,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
}
},
categoryAxis: {
categories: [author],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(reportChart);
$(document).bind("kendo:skinChange", reportChart);
</script>
**
this is now the result
What I want is, please help

Here: listsOfPeople = value, I guess what you would like to to is listsOfPeople.push(value); instead?
Your code should be like var author = doQuery("SELECT name FROM People"....
Possible issues:
doQuery() changes listsOfPeople unexpectedly.
Just some typo mistake on your variable name.
Or you mixed the use of listsOfPeople and listsOfAuthor.

Show data as a live stream, Highcharts

So What I have is a set of data stored, which I am able to access in Highchart easily. but Now what I need is to show the data as a live stream
like the following example :
https://www.highcharts.com/demo/dynamic-update
What I have done so far is Here :
<script type="text/javascript">
var xValues = [];
xValues = [1,4,3,9,3,4,4,6,4,5,3,4,3,3,1,3,2,3,2,3,4,4,3,3,4,3,5,3,6,7,3,2,5,7,4,6,7,3,6,7,4,7,4,7,3,2,5,6,7,4,3,4,6,6,7,4,6,6,7,3,6,7,3,2,4,5,6,5,9,8,4,6,2,1,5,8,5,8,2,6,3,8,4,7,3,6,1,5,8,0,2,4,7,5,8,3,7,9,3,7];
Highcharts.chart('ppg', {
chart: {
type: 'line'
},
title: {
text: 'ECG Data'
},
subtitle: {
text: ''
},
xAxis: {
crosshair: false
},
yAxis: {
title: {
text: 'Peaks'
}
},
tooltip: {
enable: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '',
lineWidth: 2,
data: xValues,
animation: {
duration: 5000
}
}]
});
</script>.
How can my data flow like the above example? in 10 10 patches.
Here is the Working JSFiddle:
https://jsfiddle.net/abnitchauhan/3vj2afnt/

You can initially add only the first 10 points and then use chart load event function and set interval to add remaining points with shift argument:
var xValues = [],
counter = 11,
startValues;
xValues = [...];
startValues = xValues.slice(0, counter);
var chart = Highcharts.chart('ppg', {
chart: {
type: 'line',
events: {
load: function() {
var chart = this,
interval = setInterval(function() {
chart.series[0].addPoint(xValues[counter], true, true);
counter++;
if (counter === xValues.length - 1) {
clearInterval(interval);
}
}, 1000);
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/7x9vrLqm/
API Reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

In your code event is missing which will trigger change per sec.
Something like this. I have used random number.
var xValues = [];
xValues = [1,4,3,9,3,4,4,6,4,5,3,4,3,3,1,3,2,3,2,3,4,4,3,3,4,3,5,3,6,7,3,2,5,7,4,6,7,3,6,7,4,7,4,7,3,2,5,6,7,4,3,4,6,6,7,4,6,6,7,3,6,7,3,2,4,5,6,5,9,8,4,6,2,1,5,8,5,8,2,6,3,8,4,7,3,6,1,5,8,0,2,4,7,5,8,3,7,9,3,7];
Highcharts.chart('ppg', {
chart: {
type: 'line',
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = Math.random();
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'ECG Data'
},
subtitle: {
text: ''
},
xAxis: {
crosshair: false
},
yAxis: {
title: {
text: 'Peaks'
}
},
tooltip: {
enable: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '',
lineWidth: 2,
data: xValues,
animation: {
duration: 5000
}
}]
});
Working fiddle

Struggling to get this JSON data into highcharts

I have the following snippet of code which takes data from a JSON URL and inputs it into MariaDB.
Now I want to take that data back out the database (as the database records the JSON over time), and then put this into a graph, but I am having difficulty in getting the data out the JSON URL into highcharts... My data looks like this:
[{"time":"1509488314","hashrate":"34096322642","minersTotal":"99"},
{"time":"1509490093","hashrate":"34096645609","minersTotal":"101"},
{"time":"1509490201","hashrate":"34096374421","minersTotal":"101"},
{"time":"1509490321","hashrate":"34138925733","minersTotal":"101"},
{"time":"1509490441","hashrate":"34062086317","minersTotal":"101"},
{"time":"1509490561","hashrate":"34116887228","minersTotal":"101"},
{"time":"1509490681","hashrate":"34053449517","minersTotal":"103"},
{"time":"1509490801","hashrate":"34060600882","minersTotal":"103"},
{"time":"1509490921","hashrate":"34065888457","minersTotal":"103"},
{"time":"1509491041","hashrate":"34093378965","minersTotal":"105"}]
I wish to basically plot the time across the X axis, and hashrate as a line and minersTotal as a bar.
I have done the PHP / MariaDB bit, but doing this part is proving to be a struggle for me.
My php code:
$mysqli = new mysqli($servername, $username, $password, $dbname);
$myArray = array();
if ($result = $mysqli->query("SELECT * FROM hashrates LIMIT 100")) {
while($row = $result->fetch_object()) {
$myArray[] = $row;
}
echo json_encode($myArray);
}
$result->close();
$mysqli->close();

According this demo (Highcharts Demos › Dual axes, line and column). The data must be an array of values e.g: ["Item1", "Item2", "Item3"].
With your data, you can use Array#map().
var times = data.map(function(x) {
return new Date(x.time * 1000);
});
var hashrates = data.map(function(x) {
return x.hashrate * 1;
});
var minersTotals = data.map(function(x) {
return x.minersTotal * 1;
});
You can do something like this:
(function() {
var data = [{
"time": "1509488314",
"hashrate": "34096322642",
"minersTotal": "99"
},
{
"time": "1509490093",
"hashrate": "34096645609",
"minersTotal": "101"
},
{
"time": "1509490201",
"hashrate": "34096374421",
"minersTotal": "101"
},
{
"time": "1509490321",
"hashrate": "34138925733",
"minersTotal": "101"
},
{
"time": "1509490441",
"hashrate": "34062086317",
"minersTotal": "101"
},
{
"time": "1509490561",
"hashrate": "34116887228",
"minersTotal": "101"
},
{
"time": "1509490681",
"hashrate": "34053449517",
"minersTotal": "103"
},
{
"time": "1509490801",
"hashrate": "34060600882",
"minersTotal": "103"
},
{
"time": "1509490921",
"hashrate": "34065888457",
"minersTotal": "103"
},
{
"time": "1509491041",
"hashrate": "34093378965",
"minersTotal": "105"
}
];
var times = data.map(function(x) {
return new Date(x.time * 1000);
});
var hashrates = data.map(function(x) {
return x.hashrate * 1;
});
var minersTotals = data.map(function(x) {
return x.minersTotal * 1;
});
Highcharts.chart("container", {
chart: {
zoomType: "xy"
},
title: {
text: "Data"
},
subtitle: {
text: "Subtitle"
},
xAxis: [{
categories: times,
crosshair: true
}],
yAxis: [{ // Primary yAxis.
labels: {
format: "{value}",
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: "Hashrate",
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis.
title: {
text: "MinersTotal",
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: "{value}",
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: "vertical",
align: "left",
x: 120,
verticalAlign: "top",
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || "#FFFFFF"
},
series: [{
name: "MinersTotal",
type: "column",
yAxis: 1,
data: minersTotals,
tooltip: {
valueSuffix: ""
}
}, {
name: "Hashrate",
type: "line",
data: hashrates,
tooltip: {
valueSuffix: ""
}
}]
});
})();
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; margin: 0 auto; min-width: 310px;"></div>
Let me know if this works for you.

I ended up going with this
$(function () {
var hashrates = new Array();
var minersTotal = new Array();
function refreshdata() {
$.getJSON("data.json", function(data) {
var hashrates = new Array();
var minersTotal = new Array();
for (i = 0; i < data.length; i++) {
var object = data[i];
var time = object.time * 1000;
hashrates.push([time, parseFloat(object.hashrate) / 1000000000]);
minersTotal.push([time, parseFloat(object.minersTotal)]);
}
$('#container').highcharts().series[0].setData(minersTotal, true);
$('#container').highcharts().series[1].setData(hashrates, true);
$('#container').highcharts().redraw();
});
}
$('#container').highcharts({
chart: {
backgroundColor: "rgba(0,0,0,0)",
color: "#FF0000",
alignTicks: false,
events: {
load: function () {
setInterval(function () {refreshdata();}, 60000);
}
}
},
title: {
text: "Pool performance"
},
subtitle: {
text: "3 days (15 min intervals)"
},
tooltip: {
shared: true,
valueDecimals: 2
},
legend: {
layout: "horizontal"
},
xAxis: {
title: {
text: "Time (UTC)"
},
type: "datetime",
showFirstLabel: true
},
yAxis: [{
title: {
text: "Hashrate (GH/s)"
},
labels: {
style: {
color: "#434348"
},
formatter: function() {
return this.axis.defaultLabelFormatter.call(this).toString().substr(0,4);
}
},
gridLineColor: "#434348",
tickInterval: 10,
min: 0
},{
title: {
text: "Miners",
style: {
color: "#95CEFF"
},
},
labels: {
style: {
color: "#95CEFF"
}
},
opposite: true,
tickInterval: 40,
gridLineColor: "#95CEFF"
}],
series: [{
name: "Miners",
type: "spline",
data: minersTotal,
yAxis: 1
},{
name: "Hashrate",
data: hashrates,
type: "spline"
}]
});
refreshdata();
});
It can be seen in action here: https://metaverse.farm/

Hide/Show yaxis on series hide/show event

I'm making a multiple panel chart, and I'm trying to hide the y-axis on the hide event of the axis serie.
I tried setting the axis height and redrawing it (didn't work), set extremes, nothing worked. I also tryed this solution but didn't work, I beleave it didn't work beacause I'm using highstock and the "solution" use Highcharts, does that make sense?
I also have to resize the others y-axis when one is hidden, but this is another problem. But if someone has a tip on how to do it automatically would be thankful
Here is my JSFiddle code.
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
var data1 = [ [100,0], [200,0], [300,1], [400,0], [500,1] ];
var data2 = [ [100,1], [200,0], [300,1], [400,0], [500,0] ];
var data3 = [ [100,1], [200,1], [300,0], [400,0], [500,1] ];
var data4 = [ [100,0], [200,1], [300,1], [400,0], [500,0] ];
// create the chart
var chart = $('#container').highcharts('StockChart', {
title: {
text: 'AAPL Historical'
},
legend: {
enabled: true
},
plotOptions: {
series: {
events: {
hide: function (event) {
console.log(this.yAxis)
//Hide
},
show: function (event) {
console.log(this.yAxis)
//Display
}
}
}
},
tooltip: {
pointFormatter: function() {
var state = (this.y == 1 ? "Active" : "Inactive");
var tooltip = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + state + '</b><br/>'
return tooltip;
}
},
yAxis: [{
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false}
}, {
top: '25%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "aaa"
}
}, {
top: '50%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false}
}, {
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false}
}],
series: [{
name: 'Data1',
data: data1,
step: true,
yAxis: 0
}, {
name: 'Data2',
data: data2,
step: true,
yAxis: 1
}, {
name: 'Data3',
data: data3,
step: true,
yAxis: 2
}, {
name: 'Data4',
data: data4,
step: true,
yAxis: 3
}]
});
});
});

I worked more on solution and I found A way to hide the y-axis, by changing its height to 0% on the series hide event. I'm also increasing the axis height back to 25% in the series show event.
plotOptions: {
series: {
events: {
hide: function (event) {
this.yAxis.update({
height: '0%'
});
},
show: function (event) {
this.yAxis.update({
height: '25%'
});
}
}
}
},
Full code
Edit:
I found a way to resize the others y-axis when one of them is hidden or one the axis is displayed.
You can check the full code.
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
var data1 = [ [100,0], [150,1], [150,0], [200,0], [300,1], [400,0], [500,1] ];
var data2 = [ [100,1], [200,0], [300,1], [400,0], [500,0] ];
var data3 = [ [100,1], [200,1], [300,0], [400,0], [500,1] ];
var data4 = [ [100,0], [200,1], [300,1], [400,0], [500,0] ];
// create the chart
var chart = $('#container').highcharts('StockChart', {
title: {
text: 'AAPL Historical'
},
legend: {
enabled: true
},
plotOptions: {
series: {
marker: {
enabled: true,
radius : 2
},
events: {
hide: function (event) {
var serieYAxis = this.yAxis;
serieYAxis.visivel = false;
serieYAxis.update({
height: '0%',
title: {
style: {"display":"none"}
}
});
var axis = this.chart.yAxis.filter(
function (axis) {
return axis.visivel == null || axis.visivel;
}
);
resizeAxis(axis);
},
show: function (event) {
this.yAxis.visivel = true;
this.yAxis.update({
title: {
style: {"display":"initial"}
}
});
var axis = this.chart.yAxis.filter(
function (axis) {
return axis.visivel == null || axis.visivel;
}
);
resizeAxis(axis);
}
}
}
},
tooltip: {
pointFormatter: function() {
var state = (this.y == 1 ? "Active" : "Inactive");
var tooltip = '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + state + '</b><br/>'
return tooltip;
}
},
yAxis: [{
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y0"
}
}, {
top: '25%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y1"
}
}, {
top: '50%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y2"
}
}, {
top: '75%',
height: '25%',
offset: 0,
lineWidth: 2,
labels: {enabled: false},
title : {
text: "y3"
}
}],
series: [{
name: 'Data1',
data: data1,
step: true,
yAxis: 0
}, {
name: 'Data2',
data: data2,
step: true,
yAxis: 1
}, {
name: 'Data3',
data: data3,
step: true,
yAxis: 2
}, {
name: 'Data4',
data: data4,
step: true,
yAxis: 3
}]
});
});
});

Displaying multiple Highcharts from single json

In this fiddle : http://jsfiddle.net/LLExL/5018/
I'm displaying a chart with dates on X axis and counts on Y axis.
I'm attempting to generalize this a little by displaying multiple charts using a single snippet of json. So have defined this modified json file :
[
{
"header": "test1",
"children": [
{
"date": "2015-01-02",
"count": "36"
},
{
"date": "2015-01-03",
"count": "29"
}
]
},
{
"header": "test2",
"children": [
{
"date": "2015-01-02",
"count": "36"
},
{
"date": "2015-01-03",
"count": "29"
}
]
}
]
Does Highcharts support this type of functionality out of box ? If so how it be achieved ? Each header element above is chart header.
fiddle code :
html :
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 350px; height: 300px;"></div>
javascript :
var pointStart = new Date().getTime();
var jsonString = '[ {"date":"2015-01-02","count":"36"} , {"date":"2015-01-03","count":"29"} ]';
var myData = JSON.parse(jsonString);
var data = []
var combinedHeights=[]
$.each(myData, function(i, obj) {
var d = new Date(obj.date)
data.push([Date.parse(d), parseInt(obj.count)])
combinedHeights.push(parseInt(obj.count))
});
jQuery(document).ready(function() {
$('#container').highcharts({
chart : { type : 'line' },
title: {
text: 'test' // Title for the chart
},
subtitle : { },
legend : { enabled : true },
tooltip : { },
plotOptions : {
series : {
pointStart : pointStart,
pointInterval : 24 * 3600 * 1000 * 30
}
},
xAxis : {
type : 'datetime'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Access Count',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
}
});
var chart = $('#container').highcharts();
chart.addSeries({
data: data
});
});
Update :
http://jsfiddle.net/LLExL/5081/
Code :
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container0" style="width: 350px; height: 300px;"></div>
<div id="container1" style="width: 350px; height: 300px;"></div>
jQuery(document).ready(function() {
var jsonString2 = '[ { "header": "test1", "children": [ { "date": "2015-01-02", "count": "36" }, { "date": "2015-01-03", "count": "29" } ] }, { "header": "test2", "children": [ { "date": "2015-01-02", "count": "16" }, { "date": "2015-01-03", "count": "15" } ] } ]'
var myData = JSON.parse(jsonString2);
$.each(myData, function(i, obj) {
create(JSON.stringify(obj) , 'container'+i)
});
var jsonString = '{ "header": "tester", "children": [ { "date": "2015-01-02", "count": "76" }, { "date": "2015-01-03", "count": "29" } ] }'
// for (i = 1; i <= 2; i++) {
// create(jsonString , 'container'+i)
// }
function create(jsonString , containerName) {
var pointStart = new Date().getTime();
var myData = JSON.parse(jsonString);
var data = []
var combinedHeights=[]
$.each(myData.children, function(i, obj) {
var d = new Date(obj.date)
data.push([Date.parse(d), parseInt(obj.count)])
combinedHeights.push(parseInt(obj.count))
});
$('#'+containerName).highcharts({
chart : { type : 'line' },
title: {
text: myData.header // Title for the chart
},
subtitle : { },
legend : { enabled : true },
tooltip : { },
plotOptions : {
series : {
pointStart : pointStart,
pointInterval : 24 * 3600 * 1000 * 30
}
},
xAxis : {
type : 'datetime'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Access Count',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
}
});
var chart = $('#'+containerName).highcharts();
chart.addSeries({
data: data
});
}
});

You can prepare parser, which puts a new div and create chart parsing data. The options can be common object, but using $.extend() is needed avoid using the same reference.
Parser:
var $chartGrid = $('#chart-grid'),
title = [],
serie,
date,
name;
$.each(json, function(i, item) {
name = 'container-' + i;
$chartGrid.append('<div id="'+name+'" class="chart"></div>');
serie = [{
data: []
}];
$.each(item.children, function(j, points) {
date = points.date.split('-'); //Date.parse doens't work in FF and IE
serie[0].data.push({
x: Date.UTC(date[0],date[1],date[2]),
y: parseFloat(points.count)
});
});
options.title.text = item.header;
options.series = serie;
$('#' + name).highcharts($.extend({}, options));
});
Example: http://jsfiddle.net/LLExL/5085/

try this out http://jsfiddle.net/Paulson/LLExL/5082/
var pointStart = new Date().getTime();
var jsonString = '[{"header":"test1","children":[{"date":"2015-01-02","count":"36"},{"date":"2015-01-03","count":"29"}]},{"header":"test2","children":[{"date":"2015-01-02","count":"29"},{"date":"2015-01-03","count":"36"}]}]';
var myData = JSON.parse(jsonString);
var data = []
var combinedHeights=[]
$.each(myData, function(i, obj1) {
var newData = [];
$.each(obj1['children'], function(i, obj2) {
var d = new Date(obj2.date)
newData.push([Date.parse(d), parseInt(obj2.count)])
});
data.push(newData);
});
jQuery(document).ready(function() {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'test' // Title for the chart
},
legend: { enabled : true },
plotOptions: {
series: {
pointStart: pointStart,
pointInterval: 24 * 3600 * 1000 * 30
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Access Count',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
},
series: [{
data: data[0]
}]
});
$('#container2').highcharts({
chart: {
type: 'line'
},
title: {
text: 'test' // Title for the chart
},
legend: { enabled : true },
plotOptions: {
series: {
pointStart: pointStart,
pointInterval: 24 * 3600 * 1000 * 30
}
},
xAxis: {
type: 'datetime'
},
yAxis: {
minPadding:0,
maxPadding:0,
gridLineColor:'rgba(204,204,204,.25)',
gridLineWidth:0.5,
title: {
text: 'Access Count',
rotation:0,
textAlign:'right',
style:{
color:'rgba(0,0,0,.9)',
}
},
labels: {
style: {
color: 'rgba(0,0,0,.9)',
fontSize:'9px'
}
},
lineWidth:.5,
lineColor:'rgba(0,0,0,.5)',
tickWidth:.5,
tickLength:3,
tickColor:'rgba(0,0,0,.75)'
},
series: [{
data: data[1]
}]
});
});

Categories