I tried many way and didnt get the result
may please help how can i generate this kind of chart in highchart.
That series will be available since Highcharts v8.0.0: https://github.com/highcharts/highcharts/issues/11311. For now you can use a combination of scatter and line series:
var scatterData = [2, 3, 7, 8, 9],
series = [{
type: 'scatter',
data: scatterData
}];
scatterData.forEach(function(el, i) {
series.push({
dashStyle: 'ShortDash',
data: [
[i, 5],
[i, el]
]
});
});
Highcharts.chart('container', {
series: series
});
Live demo: http://jsfiddle.net/BlackLabel/uwcL0h8b/
API Reference: https://api.highcharts.com/highcharts/series.line.dashStyle
Related
I’m looking for a chart libraly javascript. It can draw line chart and call to rest api every few seconds (5s or 3s) then update the line chart. I searched its calling live chart updating by json but it draw only data in my json api i want it continue drawing. Can you help me. Many many thanks.
If you want to have Charts in your project then you may want to take a look at Chartjs. It's a great library providing all the charts one may need, such as Line, Bar, Pie, and many others.
Creating a chart is easy, e.g:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
datasets: [{
label: 'apples',
data: [12, 19, 3, 17, 6, 3, 7],
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'oranges',
data: [2, 29, 5, 5, 2, 3, 10],
backgroundColor: "rgba(255,153,0,0.4)"
}]
}
});
For additional example you may want to see this introduction to Chart.js.
For dynamically updating your Charts check directly the Updating Charts Docu. An example from the link:
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.update();
}
I am using HighChart's stock chart. The chart is rendering correctly. But, while zooming in my graph line alone is getting hidden. But, when I am moving back to the last position the graph is displaying correctly.
Please guide me to resolve this.
Thanks in advance!
You are providing the data array that is not sorted as you can see in the Highcharts error - https://www.highcharts.com/errors/15. So, the solution is to sort data. Check the demo posted below.
Code:
Highcharts.StockChart({
chart: {
renderTo: 'container1',
zoomType: 'x'
},
xAxis: {
type: 'datetime',
},
series: [{
name: 'AAPL',
data: [
[1556881096000, 3],
[1556881096000, 3],
[1556881096000, 3],
[1556881096000, 3],
[1556880496000, 3],
[1556880496000, 3],
[1556880496000, 3],
[1556880496000, 3],
[1556879896000, 9],
[1556879896000, 9]
].sort()
}]
});
Demo:
http://jsfiddle.net/BlackLabel/n2bLro7g/3/
I have a line graph which can drop down in a straight line. e.g. I have a point at (1, 100) then a point at (1,0). However, highcharts (https://www.highcharts.com/) will only display information for one of the points. Is it possible to get it to show information on both points when I hover over each of them?
The default for line type series is findNearestPoint: 'x' https://api.highcharts.com/highcharts/plotOptions.line.findNearestPointBy .
If you change that to findNearestPoint: 'xy', you'll get the behavior you want.
Highcharts.chart('container', {
series: [{
findNearestPointBy:'xy',
data: [
[0, 29.9],
[1, 50],
[1, 71.5],
[3, 106.4]
]
}]
});
http://jsfiddle.net/vt1cep0L/2/
i'm new to highcharts.
I already browse in highcharts example. but, every time I look for the sample, it came with the column bar chart like this :
All I want is like this :
But I dont know how. Maybe you can help me figured it out.
Thank you.
You can simply set x/y pairs for each of points. Then set column.grouping to false: http://jsfiddle.net/27u9zuhj/
plotOptions: {
column: {
grouping: false
}
},
series: [{
name: 'John',
data: [ [0, 5], [1, 3], [2, 4]]
}, {
name: 'Jane',
data: [ [3, 2], [4, 2]]
}]
I'm using HighChart.
I want to fill color to part of area for areaspline chart (or any type chart).
Like in this image:
How can I do that?
You need to use two series, first spline and second with area.
series: [{
data: [3, 4, 3]
}, {
type: 'areaspline',
data: [null,null,3, 4, 3, 3, 5, 4]
}]
http://jsfiddle.net/7wSuT/