Click here to Skip to main content
15,937,012 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
am using high charts in my application since last two days am trying to how to bind datatable values to high charts.. i didnt get any solution.. pls any one help me for this i need this urgent...
step by step process i want
Posted
Updated 5-Mar-17 18:18pm
v2
Comments
[no name] 29-Jun-13 6:57am    
It might be urgent to you but to the rest of the world, it is not urgent at all. Why are you not asking the people that make the chart control? They know about their product and that is what you pay them for when you bought the control.

Hello Santosh,

Below code snippet shows a typical script for rendering a Line chart in High Charts which is a pure JavaScript Charting Solution.
JavaScript
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                text: 'Monthly Average Temperature'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                }
            },
            tooltip: {
                enabled: false,
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y +'°C';
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });

Looking at this script will immediately tell you about two bare minimum things that are required in order to render the line chart, these are:

  1. The array of string labels to be displayed on X/Y axis
  2. The actual array of numeric values using which the chart is rendered

What this means is that in order to render these charts you need to first fetch the data from database and then create these arrays and output those in JavaScript. And then on page load (in browser) call the chart javascript api to render the chart. Being a javascript library it won't support things like databinding.

Regards,
 
Share this answer
 
You can fetch data from database using adapter or from query on code side and convert into JSON format. On scripting of high chart you can use in array format. In High chart, data series use array format.
eg.:
var arr= [];

arr.push(data) ;
You can push data via foreach loop.
Here data is our JSON which has taken from code side using ajax.
in Highchart:

series: [{
                name: 'ABC',
                data: arr
            },
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900