score:4
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:
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.
Source: stackoverflow.com
Related Query
- High chart date
- High chart date time conversion showing wrong values
- high chart date format in x-axis
- X-Axis is not fully taking the width in date time chart in high charts
- high chart with date range filtering
- In high chart how to add event for label click
- How do I get remove of 'data table' option from High chart export
- knockoutJS dynamic chart with high charts
- Stock chart timeline buttons and date field left align with chart
- High and low line on candlestick chart
- How do I reduce the space between title and chart of a High Chart?
- High Chart Async drilldown
- Showing Context Menu on right click of High Chart series
- High chart - Column Range Chart with Time range. How to get tooltip as Start and End time
- How to call typescript function inside High chart click event
- How to use add series and update methods in the high chart wrapper for angular?
- Adding date range filter to Highcharts chart
- Trying to update high chart data
- Laravel 5.5 Console TV Bar Chart High Charts multipleDatasets and label
- How to set variable in high chart data field
- High charts queue chart updates after ajax with multiple charts in firefox
- High charts: Can we reduce the distance between two bars in grouped column chart
- HighCharts Stock Chart error code 18
- High charts - Increasing the space between chart and title
- Need legends in high chart to be square shape
- Updating basic column high chart
- Cannot implement lazy high chart receiving errors
- In highcharts,tool-tip does not move when chart has high data unlike when it has low data
- Activity gauge High Chart with Range option
- High Chart to Image
More Query from same tag
- Highcharts -Highmaps making map curved(geojson QGIS)
- Pagination in Highcharts
- One Average Spline for each Column in Highcharts Combination Chart
- Getting Trailing Garbage error when loading maps from Highcharter in R
- High Chart X Axis to display month and year
- R Highcharter: Formatting tooltip
- In HighCharts how to set number of xAxis autoly?
- HighCharts Export burger menu not showing in AngularJS app
- Highchart Gantt remove Y Axis label
- Customizing the colors of individual series in HighCharts
- Dates not displaying correctly in Highcharts plot with irregular time data
- HighCharts : Is it possible to customize the colors of individual series?
- how to find out the Height dynamically in highcharts
- Highcharts values in one column
- How to fix Prototype conflict with Highchart?
- Highcharts angular dependency-wheel
- Highchart Stock gui does not work in Angular 8
- How to render efficiently few hundreds of angular highcharts in the browser without crashing?
- Changing the name for 'categories' of x axis while implementing crossfilter with highcharts
- Tooltip in Javascript with if else condition
- Highcharts : selection
- How do you add text to the bottom center of legend and bottom center of chart under legend?
- How to display extra data in highcharts bubble chart tooltip with datetime x-axis
- Combination of charts in highcharts overlapping each other
- Different xAxis label, max and colors for drilldown in Highcharts
- Highcharts manipulate with points on the graph
- Datetime format for series - Highcharts
- How to get Number of new users per day to DotNet.HighChart
- Highcharts shankey diagram percentage not showing
- Highcharts pie chart dynamically changes size