Develop Reference

How to combine two Highcharts chart types?

Right now I have a simple column chart with following code using Highcharts:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
//some code
},
xAxis: {
categories: []
},
yAxis: {
//some code
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y}'
}
}
},
legend: {
//some code
},
series: []
};
$.getJSON("data/column.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
I now want to add a line chart to the same container, using exactly the same options (despite of the chart type). The date is also served via JSON.
How can I achieve this?
What I did so far:
I created a second variable "options2" with values chart and series.
Then I called
$.getJSON("data/line.php", function(json) {
options.xAxis.categories = json[0]['data'];
options2.series[1] = json[1];
chart = new Highcharts.Chart(options2);
});
But that only shows the first column chart.

Probably you should try use $.merge to prevent object edition.
Try this
$.getJSON("data/column.php", function(json) {
// Merge objects
var newOptions = $.extend({}, options);
// Edit new object instead of old
newOptions.xAxis.categories = json[0]['data'];
newOptions.series[0] = json[1];
chart = new Highcharts.Chart( newOptions );
});

Solved it by passing the series option (chart type) directly via JSON.
I added the "type:line" to the data array, which then overrides previously set options within the script tag.

google chart double axis, set format

I have created a Google bar chart, with two x-axis.
My problem is that I cannot seem to get the correct format on the bottom axis, which should be shown in percentage.
I have tried to use the following
axes:{{},{format:'#%'}}}
And in general inserting format:'#%' at places that would make sense, but nothing seems to work.
Is there anyone who has an idea for this?
See the entire code here: https://jsfiddle.net/laursen92/azr4kfn0/1/
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Slave number', 'Voltage', '%'],
['Slave 1', 12.15, 0.40],
['Slave 2', 12.18, 0.50],
['Slave 3', 11.80, 0.60],
['Slave 4', 13.12, 0.70],
]);
var formatter = new google.visualization.NumberFormat({
pattern: '##0.00'
});
var formatter2 = new google.visualization.NumberFormat({
pattern: '##0%'
});
formatter.format(data, 1);
formatter2.format(data, 2);
var options = {
width: 800,
chart: {
title: 'Status of slaves',
subtitle: 'Overview of the voltage and SOC of connected slaves. '
},
bars: 'horizontal', // Required for Material Bar Charts.
series: {
0: {
axis: 'voltage'
}, // Bind series 0 to an axis named 'voltage'.
1: {
axis: 'percent'
} // Bind series 1 to an axis named 'soc'.
},
axes: {
x: {
voltage: {
side: 'top',
label: 'Voltage'
}, // Top x-axis.
percent: {
label: 'Percent',
} // Bottom x-axis.
}
},
};
var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};

Here's an update to your fidde: https://jsfiddle.net/Balrog30/azr4kfn0/4/
I used the a little codepen I wrote to reverse-engineer the changes to the material chart options, which are still mostly undocumented. You can find that here: http://codepen.io/nbering/pen/Kddvge
Here's how the option should be formatted:
var options = {
axes: {
x: {
yourAxis: {
format: {
pattern: "#%"
}
}
}
};
-- Or --
options.axes.x.yourAxis.format.pattern = "#%";

Chartist JS, line graph going under X axis

Currently I'm using the Chartist JS jQuery plugin and I'm having this issue where one of the function is going below x axis even though it doesn't have any negative points.
Is there anyway to avoid this issue, please check the image to further understanding.
The code
var options = {
low: 0,
fullWidth: true,
height: '225px',
chartPadding: {
left: 0,
right: 40,
},
showArea: true,
onlyInteger:true,
bezierCurve:false
};
$.ajax({
url: $('.ct-log-lead').data('url'),
method: 'GET',
data: {customerId:$('.ct-log-lead').data('id'),phoneNumber: $('.ct-log-lead').data('phone')},
success: function (d) {
data = {
labels: d[0],
datasets: d[1]
};
// var leadsLastSevenDays = 0;
// data.datasets[0].forEach(function (value) {
// leadsLastSevenDays += value;
// })
// $('.call-seven').html(d[2]);
var a = new Chartist.Line('.ct-log-lead', {
labels: data.labels,
series: [
{
name: 'Form Leads',
data: data.datasets[0]
},
{
name: 'Call Logs',
data: data.datasets[1]
}
],
}, options);
}
});
THanks

I faced the same problem just add this in your options variable and for more information By default Chartist uses a cardinal spline algorithm to smooth the lines.You can customize it eaisly.
lineSmooth: Chartist.Interpolation.simple({
divisor: 2
}),
see the both of fiddles
http://jsfiddle.net/Van_Jarvis/3uL7zu4o/113/
http://jsfiddle.net/3uL7zu4o/114/

In options you can pass bezierCurve so that you will not get smooth curves,
var options = {
bezierCurve:false
}
var myLineChart = new Chart(ctx).Line(data, options);

The standard line interpolation / smoothing can cause unwanted artifacts. Use the simple interpolation as an alternative:
http://gionkunz.github.io/chartist-js/examples.html#example-line-simple-smoothing

Why does a spurios alert() cause Google Chart to draw correctly?

I'm trying to draw two Google Charts on the same webpage.
The code for the 2nd chart looks like this
function chart2() {
/* second chart (scatter plot) */
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'Date');
data2.addColumn('number', 'Sold Price');
var map = /*[[${worthTemplateData.pricingInfo['marketHistory']}]]*/ [];
map.forEach(function (item) {
data2.addRows([ [item.date, item.origPrice] ]);
});
alert('Please wait');
var options = {
width: 900,
height: 500,
chart: {
title: 'Price History',
subtitle: 'For similar-size units'
},
hAxis: {title: 'Date'},
vAxis: {title: 'Sold Price'}
};
var chart2 = new google.charts.Scatter(document.getElementById('google-chart2'));
chart2.draw(data2, google.charts.Scatter.convertOptions(options));
}
It works.
But as soon as I remove the alert('Please wait'); line, it doesn't work anymore! The screen area where the chart should be is empty.
I suspect there is some timing issue, even though JS is presumably "single-threaded".
What's more puzzling, if I change the order, only the other chart loads:
google.load("visualization", "1.0", {packages: ["bar", "scatter"]});
google.setOnLoadCallback(drawCharts);
function drawCharts() {
chart2();
chart1();
}
What's the fix?

There is an issue with drawing multiple material charts.
You could switch to Classic Scatter Charts: google.charts.Scatter -> google.visualization.ScatterChart or try with some delay:
function doSetTimeOutDrawChart(chart, data, options, delay){
setTimeout(function () {
chart.draw(data, options);
}, delay);
}
like in this example:
jsFiddle

How to format Highcharts columnRange to get json data for temperature Min and Max

I'm trying to display information on Highcharts from the forecast.io api. With the help of others on this site, I have figured out how to call the data using a simple line or area chart; however, I can't figure out how to with the columnRange chart. I want to display the daily min and max temperature forecast. So the top column would display today's min and max temp, and the next column would be tomorrows, and so on.
To call the min and max for today from forecast.io:
data.daily.data[0].temperatureMin
data.daily.data[0].temperatureMax
Tomorrows would have a "1" instead of a 0. The day after would have a "2".
I haven't been able to figure out how to make a function that does this for each day. I have a jsfiddile which includes my forecast.io API key. This is needed to call from the source.
Anyways, any help would be much appreciated! http://jsfiddle.net/nn51895/gjw9m1qo/2/
(my x axis labels are really messed up as you will see..)
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
},
yAxis: {
title: {
text: ''
}
},
tooltip: {
valueSuffix: '°F'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '°F';
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Daily Min and Max',
data: 'ChartData',
pointStart: new Date().getTime(),
pointInterval:90000000,
}]
});
});
$.ajax({
url: "https://api.forecast.io/forecast/87a7dd82a91b0b765d2576872f2a3826/53.479324,-2.248485",
jsonp: "callback",
dataType: "jsonp",
success: function(chart) {
var dataArr = new Array();
var height = chart.xAxis[0].height;
var pointRange = chart.daily.data[0].temperatureMax - chart.daily.data[0].temperatureMin;
var max = chart.daily.data[0].temperatureMax;
var min = chart.daily.data[0].temperatureMin;
var pointCount = (max - min) / pointRange;
var timeint = chart.daily.data[0].time;
for(var i=0; i<chart.daily.data.length; i++)
dataArr.push(chart.daily.data[i].temperatureMin);
plotChart(dataArr, timeint)
}
});

First of all, as said in the comment:
success: function (chart) {
...
var height = chart.xAxis[0].height;
}
You are trying to get for some unknown reason height of xAxis from the chart. Meanwhile you chart variable is referring to the data from AJAX call. I hope that's clear, so remove that line or change to:
success: function (chart) {
var myChart = $('#container').highcharts();
var dataArr = new Array();
var height = myChart.xAxis[0].height;
}
Second thing, that option:
data: 'ChartData',
Is wrong, there should be an empty array, since Highcharts requires array for data, not some string:
data: [],
Now, after fixing these bugs, you should go to this demo and create the same data format. That's example for required format for Highcharts.
More about series.data can be found in API reference - you need to read this.