SUPER_USER SUPER_USER - 4 months ago 31
jQuery Question

High chart date

I try to display pie chart according to date .. when I select value from drop-down and dates from calendar, first I try to display data in alert box..
so data is successfully shown in alert box, and now I want to show data in pie chart, and I try this but chart does not display:

UPDATE CODE


<script type="text/javascript">


var strArray = [['sfdsdfLi', 9], ['Kiwsdfi', 3], ['Mixesdfd nuts', 1], ['Oranges', 6], ['Grapes (bunch)', 1]];
$(function () {
$('[ID*=search_data]').on('click', function () {
var from = $('[ID*=fromdate]').val();
var to = $('[ID*=todate]').val();
var reg = $('[id*=regiondrop] option:selected')[0].value; // changed this to .val()
var obj = {};
obj.fdate = from;
obj.tdate = to;
obj.region = reg;
GetData(obj);
return false;
});
});
function GetData(obj) {

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebForm1.aspx/GetVo",
data: JSON.stringify(obj),

dataType: "json",
async: true,
cache: false,
success: function (result) {

alert(result.d);
alert('u');
// start
strArray = result.d;
var myarray = eval(strArray);
DreawChart(myarray);

alert('uu');

} ,
error: function (result) {
alert("Error");
}
});
}
function DreawChart(result) {
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Contents of Highsoft\'s weekly fruit delivery'
},
subtitle: {
text: '3D donut in Highcharts'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
series: [{
name: 'Delivered amount',
data: result


}]
});

}
</script>

Answer

Here's an updated version of your fiddle with the working chart: https://jsfiddle.net/brightmatrix/bkbdna6d/12/

Four items to note:

1) You had your Highcharts libraries called before your jQuery scripts were called. They should be ordered as follows:

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- moved the Highcharts scripts AFTER the jQuery scripts are called -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

2) You were missing an ID for your dropdown menu, so the value wasn't being retrieved by your first function.

In your HTML:

<select id="regiondrop">  <!-- added id here; needed in your first function call  -->
    <option value="UK">UK</option>
    <option value="France">France</option>
    <option value="London">London</option>
    <option value="Paris">Paris</option>
</select>

In your Javascript code:

$(function () {
    $('[ID*=search_data]').on('click', function () {
        var from = $('[ID*=fromdate]').val();
        var to = $('[ID*=todate]').val();
        var reg = $('[ID*=regiondrop]').val();      // changed this to .val()
        var obj = {};
        obj.fdate = from;
        obj.tdate = to;
        obj.region = reg;
        GetData(obj);
        return false;
    });
});

3) As Sebastian Bochan noted, the values for your chart were being read as a string, not an array. This is how it should appear. Notice there are no quotes around the entire array.

// removed quotes from this line to make it a regular array, not a string
var strArray = [['sfdsdfLi', 9],['Kiwsdfi', 3],['Mixesdfd nuts', 1],['Oranges', 6],['Grapes (bunch)', 1]];

Now, once you click the "Search Data" button, the donut chart appears:

enter image description here

4) Upon further review, I think the JSON.stringify(obj) line is what's causing your data not to appear. According to the Mozilla Developer network:

The JSON.stringify() method converts a JavaScript value to a JSON string, optionally replacing values if a replacer function is specified, or optionally including only the specified properties if a replacer array is specified.

(see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)

That's the key problem I see: your data is being returned as a string, not an array, so your chart isn't getting the data in the right format. Instead, try using JSON.parse():

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "WebForm1.aspx/GetVo",  // <--- this is a relative URL and will not work in your fiddle; update your source code with the full URL instead
    data: JSON.stringify(obj),   // <--- change this to JSON.parse(obj)
    dataType: "json",
    async: true,
    cache: false,
    // ... the rest of your code ...

This question elsewhere on Stack Overflow might be helpful for you: Difference between JSON.stringify and JSON.parse

I hope all of this is helpful. If you have any questions, please leave a comment and I'll be glad to edit my answer as needed.

Comments