{"id":19996,"date":"2015-05-26T11:46:12","date_gmt":"2015-05-26T06:16:12","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=19996"},"modified":"2017-04-25T10:00:13","modified_gmt":"2017-04-25T04:30:13","slug":"adding-interactive-charts-to-web-pages-using-highcharts","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/adding-interactive-charts-to-web-pages-using-highcharts\/","title":{"rendered":"Adding interactive charts to web pages using Highcharts"},"content":{"rendered":"

I recently had to add charts to a web page in my project. I\u00a0used\u00a0Highcharts<\/a> library for this.\u00a0It is very dynamic allowing you to change graphs even after the chart\u00a0has been drawn.<\/p>\n

To display\u00a0a graph we need a div with an ID. Let’s say we have\u00a0div with ID “chartDivId” and we want to display two lines in the chart. We can use the below for doing this.<\/p>\n

[code language=”javascript”]
\n<div id="chartDivId">
\n<\/div>
\n<script>
\nvar myChart = new Highcharts.Chart({
\n chart: {
\n renderTo: ‘chartDivId’
\n },
\n series: [{
\n data: [[1, 2], [2, 9], [3, 4], [5, 15]]
\n },
\n {
\n data: [5, 6, 7, 9, 15, 2, 5]
\n }]
\n });
\n<\/script>
\n[\/code]<\/p>\n

Using the above I was able to get this chart. Quite easy? Wasn’t it?<\/p>\n

\"charts2\"<\/a><\/p>\n

 <\/p>\n

A few things about the above code<\/p>\n