highcharts Getting started with highcharts Hello World
Example
Begin by including highcharts.js in your index.html
<html>
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
Add a <div> to contain your chart
<body>
<div id="chart">
<!-- Chart goes here -->
</div>
Specify the configuration to create the chart. The mininum configuration required to create a chart is -
-
Where does the chart go? - chart.renderTo
-
What is the data to be plotted? - There are a few ways to feed in the data to be plotted; the most common among them being the series object.
var chartOptions = { chart: { renderTo: 'chart' }, series: [{ data: [1, 2] }] }; var chartHandle = Highcharts.Chart(chartOptions);
This creates a plot as follows - fiddle.
There are numerous configuration options that can be added to the chart, a few common ones being,
- chart.type - What type of chart do you want to plot?
- title - Configuration for the title of the chart
- xAxis/yAxis - Configuration for the x-axis/y-axis of the chart
A complete list of all configuration options can be found here.
<script>
var chartOptions = {
chart: {
renderTo: 'chart',
type: 'bar'
},
title: {
text: 'Hello Highcharts'
},
xAxis: {
categories: ['Hello', 'World']
},
yAxis: {
title: 'Value'
},
series: [{
name: 'Highcharts Intro',
data: [1, 2]
}]
};
var chart = new Highcharts.Chart(chartOptions);
</script>
</body>
</html>
A good place to start in the Highcharts doc would be here.
