1

I have some JSON data as follows with country name(KEY) and backlog count(VALUE).

JSON Data:

{"United States":"50","Western Europe":"100","Canada":"150","Germany":"200","France":"250","Mexico":"300"}

Chart:

Now i want to plot this values in chart like,

Country Name --> X Axis

Backlog Count --> Y Axis

How can i achieve this ?

Code:

 <html>
 <head>
    <title>RESTful Webservice JQuery client </title>
  </head>
  <body>
     <table id="results" border="1"></table>
     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
     <script src="http://code.highcharts.com/highcharts.js"></script>
 <script>

         //When DOM loaded we attach click event to button
         $(document).ready(function() {

             //after button is clicked we download the data
             //$('.button').click(function(){

                 //start ajax request
                 $.ajax({
                     url: "data.json",
                     //force to handle it as json
                     dataType: "json",
                     success: function(data) {
                         //Stringify the Json
                        var strigifyJson=JSON.stringify(data);
                        //data downloaded so we call parseJSON function 
                         //and pass downloaded data
                         var json = $.parseJSON(strigifyJson);
                        //print it to the firebug console for troubleshooting
                        console.log(json);
                        //parse description and value using each function
                        var tr;
                        var country,backlog;
                        jQuery.each(json, function(i, val) {
                        tr += "<tr><td>"+i+"</td><td>" +val+"</td></tr>";
                        console.log(i+" "+val);
                        });
                        console.log(country+" "+backlog);   
                        //now json variable contains data in json format
                         //let's display a few items in webpage using html function
                         $('#results').html(tr);
                        $('#container').highcharts({
                        chart: {
                        renderTo: 'container',
                        type: 'column'
                        },
                        xAxis: {
                        title:{
                        text: 'Country'
                        },
                        categories: ["United States", "Western Europe", "Canada", 
                        "Germany", "France", "Mexico"]
                        },
                        yAxis: {
                        title:{
                        text: 'Backlog Count'
                        }
                        },
                        series: [{
                        data: [50, 100, 150, 200, 250, 300]
                        }],
                        title: {
                        text: 'Backlog Trend'
                        }
                        });
                     }
                 });
             //});
         });


     </script>
    <div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>
 </body>
 </html>

Here i want to pass the Xaxis and Yaxis value dynamically from a JSON file?

4
  • What is the format of data in data.json?
    – Grynn
    Dec 9, 2013 at 22:45
  • {"United States":"50","Western Europe":"100","Canada":"150","Germany":"200","France":"250","Mexico":"300"} this is the content of data.json file .. Dec 10, 2013 at 6:23
  • jsfiddle.net/xPSXQ/1 : example with data being loaded dynamically
    – Grynn
    Dec 10, 2013 at 10:37
  • Hey Grynn, that worked like a charm ! Thanks a lot for the quick help ! Dec 11, 2013 at 5:37

6 Answers 6

5

Highcharts is nice. For your example:

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>

JS:

$('#container').highcharts({
    xAxis: {
        categories: ["United States", "Western Europe", "Canada", 
                     "Germany", "France", "Mexico"]
    },
    series: [{
        data: [50, 100, 150, 200, 250, 300]
    }]
});

JSFiddle: http://jsfiddle.net/LLExL/2075/

Example

1
  • Hi Grynn, Thanks for the quick response, i just want to pass the X-Axis and Y-Axis value dynamically from a JSON file. Is it possible using HighCharts ? Dec 9, 2013 at 6:33
3

Since the title of the publication says HTML table to chart, using this library can help: HTMLtable2chart

If you have a HTML table like this:

<table id="tableConten">
    <thead>
        <tr>
            <th></th>
            <th>Backlog Count</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>United States</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Western Europe</td>
            <td>100</td>
        </tr>
        <tr>
            <td>Canada</td>
            <td>150</td>
        </tr>
        <tr>
            <td>Germany</td>
            <td>200</td>
        </tr>
        <tr>
            <td>France</td>
            <td>250</td>
        </tr>
        <tr>
            <td>Mexico</td>
            <td>300</td>
        </tr>
    </tbody>
</table>

You add between head tags:

<script type="text/javascript" src="js/HTMLtable2chart/graficarBarras.js"></script>
<script type="text/javascript" src="js/HTMLtable2chart/tabla2array.js"></script>

You add a canvas object

<canvas id="chart" width="750" height="480" style="border: 1px solid black;">Canvas is not supported</canvas>

Finally add javascript code at end of document

<script type="text/javascript">
    var misParam ={
        miMargen : 0.80,
        separZonas : 0.05,
        tituloGraf : "Title of Chart",
        tituloEjeX : "Country",
        tituloEjeY : "Backlog Count",
        nLineasDiv : 10,
        mysColores :[
                        ["rgba(93,18,18,1)","rgba(196,19,24,1)"],  //red
                        ["rgba(171,115,51,1)","rgba(251,163,1,1)"], //yellow
                    ],
        anchoLinea : 2,
    };

    obtener_datos_tabla_convertir_en_array('tableConten',graficarBarras,'chart','750','480',misParam,true);
</script>

And you will have:

column Chart

So, you can build a chart from HTML table code

0

You can use highcharts.com, u will have to modify your json a bit for the right format.

0
0

I use kendo ui data viz and it works perfect for me.

0

You need to parse your json to correct form. You can use loop and iterate on each element, pushing in new table. What is important you need to use parseFloat() to transform strings to numbers, in data array.

-1

if you have a json data you can try any java script charting library to draw chart.
-ExtJS4 has a great set of charts.
-D3.js supports loading data through json.
-highCharts is also great.
-dygraphs

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.