score:1
Yes, I did it!
Bellow follow the source code that I've created:
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 310px"></div>
Javascript Code
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {
var ohlc = [],
ohlc2 = [],
volume = [],
dataLength = data.length,
groupingUnits = [
['week', [1]],
['month', [1, 2, 3, 4, 6]]
],
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
ohlc2.push([
data[i][0], // the date
data[i][1] - (Math.ceil(Math.random()*100)+100), // open
data[i][2] - (Math.ceil(Math.random()*100)+100), // high
data[i][3] - (Math.ceil(Math.random()*100)+100), // low
data[i][4] - (Math.ceil(Math.random()*100)+100) // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
title: {
text: 'Two Panes & Multiple Series'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
name: 'AAPL2',
data: ohlc2,
dataGrouping: {
units: groupingUnits
}
}, {
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
And the link in JSFiddler: http://jsfiddle.net/marcelojuventino/tc1a78ma/1/
Thanks to everybody!
Source: stackoverflow.com
Related Query
- Is it possible create a Highstock chart using TWO PANES and MULTIPLE SERIES in a pane
- Is it possible to have two Y Axis in a highstock chart from highcharts one on the left and another on the right?
- How could you supply multiple series to a line chart in R shiny using highcharter package and without hardcoding the series?
- Possible to create a dual y axis chart but where the secondary y series is using a secondary x axis?
- Highcharts: create multiple series grouped my month and year using JSON data
- How to create a column range chart in Highcharts using range and navigator functions?
- How to create a new Highstock chart with new Highchart and not jquery?
- Displaying multiple series in the navigator of an HighStock chart
- Using HighCharts and DotNet.HighCharts to "Play" Multiple Series
- Change chart type and redraw with multiple series in Highcharts
- Highcharts - how to create multiple y axis and group the data series
- Can we create pie chart and scatter plot combined using highcharts.js?
- Strange behavior with highcharts when using "column" type and multiple datetime series
- Plot Highchart multiple series line chart using JSON data
- Wrong data display when i set multiple series type in highstock chart
- highcharts change chart type using dropdown for multiple series
- How to create pie chart with only 1 series data and have background be a circle
- Adding multiple series to the spline chart using dotnet high charts in asp.net mvc3
- finding the value in the series object and displaying in the tooltip of the high chart using angular 4
- Basic Highcharts Multiple Series Chart Using JSON
- I want to capture the starting and end point of all the series in my multigraph and show it in a table using MeasureX of StockTools in Highstock
- Using a highstock chart with stacked series
- Highstock.js: Not able to create multi pane chart with two stacked column charts, one "normal" and the other "percent"
- How can I prepare a Group Stacked Bar Chart in Highcharts using multiple and different types of data?
- Highcharts : using same div to load a chart multiple times with different series data
- How to drag select multiple columns on highstock chart and have it reflect on the navigator?
- Chartkick gem, limit group in pie chart and multiple series
- Highcharts Highstock How to Plot OHLC and Line Charts from One Set of Embedded CSV Data Using Series Map Tools?
- Is it possible to create a chart which has conditional coloring and also shows up in legend?
- Sorting Scatter Highstock Chart with Multiple Series
More Query from same tag
- Angular 2 Highcharts Cannot read property 'info' of undefined
- Sort the series data for every X-Axis in Highcharts
- can't get data from mysql in highchart
- Highchart Single Legend to control Multiple chart
- How to display top 3 data label in piechart highchart
- Highcharts update grouped data point color
- Highchart line chart with category do not occupy full width
- Highcharts - Local export server installation issue (Tomcat Java)
- I don't want circles in my line Highchart
- Fetch data from firebase firestore and plot histogram using highcharts when cardview clicked - android
- Select custom date range on highstock control
- How can I render a watermark image in my highchart from local directory?
- Highcharts addSeries yAxis Label Formatting
- Combine Dates with Homerun Data from JSON
- Change color code on colum, depending on data value (highchartJS)
- HighStocks series does not show line on Black Colors
- Uncaught ReferenceError: Highcharts is not defined at Object.success
- How to render Gantt Highchart from data source
- Highchart stacked column chart missing some items
- Stacked y-Axis on Highcharts, how to make it one?
- Highcharts piechart labels going out of parent
- Getting cursor position and relevant data from Highmaps
- Highstocks - how to detect when zoom button is pressed
- Legend is disappearing on HighCharts pie refreshing
- How to resize Highcharts chart on KendoUI/Angular Window resize
- i want to show/hide y axis grid lines of highchart by onclick on button
- Remove extra ticks when tickmarkPlacement: 'on'
- Simple Line Chart using HighChart
- How to show popup on highchart column click
- How to customize view data table functionality in Highcharts