Display charts according to month selected by user from JSON file

Question

I am having a json file (data.json) and HTML file which contains one select menu and button on selecting of month the chart should display fetching value from json file currently the chart is displayed on hard coded value but I want dynamic values instead so please suggest ways to do it.

Here is the plunkr link code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>

<script src="data.json"></script>

<script>

function func()
{
var z=document.getElementById('month').value;


alert(mydata);



        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Sales Report"+z,
                fontFamily: "Verdana",
                fontColor: "Peru",
                fontSize: 28

            },
            animationEnabled: true,
            axisY: {
                tickThickness: 0,
                lineThickness: 0,
                valueFormatString: " ",
                gridThickness: 0                    
            },
            axisX: {
                tickThickness: 0,
                lineThickness: 0,
                labelFontSize: 18,
                labelFontColor: "Peru"

            },
            data: [
            {
                indexLabelFontSize: 26,
                toolTipContent: "<span style='\"'color: {color};'\"'><strong>{indexLabel}</strong></span><span style='\"'font-size: 20px; color:peru '\"'><strong>{y}</strong></span>",

                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                indexLabelFontWeight: 600,
                indexLabelFontFamily: "Verdana",
                color: "#62C9C3",
                type: "bar",
                dataPoints: [
                    { y: mydata.January[1].count, label: "21%", indexLabel: "Video" },
                    { y: 25, label: "25%", indexLabel: "Dining" },
                    { y: 73, label: "33%", indexLabel: "Entertainment" },
                    { y: 36, label: "36%", indexLabel: "News" },
                    { y: 42, label: "42%", indexLabel: "Music" },
                    { y: 60, label: "49%", indexLabel: "Social Networking" },
                    { y: 50, label: "50%", indexLabel: "Maps/ Search" },
                    { y: 55, label: "55%", indexLabel: "Weather" },
                    { y: 61, label: "61%", indexLabel: "Games" }


                ]
            }
            ]
        });

        chart.render();


}
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
</head>

<body>  
<div>
    <span>
        <select id='month'>
            <option selected value='January'>January</option>
    <option value='February'>February</option>
    <option value='March'>March</option>
    <option value='April'>April</option>
    <option value='May'>May</option>
    <option value='June'>June</option>
    <option value='July'>July</option>
    <option value='August'>August</option>
    <option value='September'>September</option>
    <option value='October'>October</option>
    <option value='November'>November</option>
    <option value='December'>December</option>
        </select>
    </span>
    <span><input type="submit" id="reportbtn" value="Report" onclick="func()"/></span>
</div>
<div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>

</html>

Answer 1

I'm doing the same thing using Google charts:

Select month dropdown
Press submit button
Pass java script / jquery values to server through AJAX
Write DB query according to month wise data you want For eg data values should be group by months ** It depends according to your requirement, this is just an example.
```
 +------------+------+ | month |value | +------------+------+ | January | 11 | | February | 22 | +------------+------+ 
```
Execute DB query
Get output in multi-dimension array For eg using PHP -> $table[] = array(months, values);
JSON encode output rows from server For eg echo json_encode($table);
Give AJAX response data back to client side chart
Render the data in chart accordingly

Display charts according to month selected by user from JSON file

Question

1 answers

solution1
0 2016-08-10 12:35:45

Display charts according to month selected by user from JSON file

Question

1 answers

solution1 0 2016-08-10 12:35:45

solution1
0 2016-08-10 12:35:45