score:5
One way is by pre-processing the data, replacing null
with 0
:
var withNulls = [null, 12, 23, 45, 3.44, null, 0];
var noNulls = withNulls.map(function (item) {
return (item === null) ? 0 : item;
});
Example saved on jsfiddle: http://jsfiddle.net/7mhMP/
score:0
I have the same problem and what i understand is that you should set your data structure in database as VARCHAR and set the default value to null so where you don't have data it becomes NULL. Then it accept null values and highchart don't display and connect missing areas with null
values.
In addition you have to receive data as NULL
and don't change them to ''
.
see this working example:
var chart = new Highcharts.Chart({
chart: {
defaultSeriesType: 'spline', // use line or spline
renderTo: 'container1'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [9, 4,null, 2, 1, 0, 6, 5, 4, 1, 6, 4]
}]
});
here is the fiddle with two different chart using null
and ''
UPDATE:
If you are using parseINT to push data you should remember that parseINT(NULL)
gives you NAN
so for this bug try to manually push NULL with something like this:
var val = parseInt(rows[i]);
if (isNaN(val))
{
val = null;
result.push(val);
}
score:1
You hava to fill the missed data as 0. Because highchart don't konw xAxis interval.
If you have a time series at a 1 minute interval, you should set every missing minute data to 0; If you have a time series at a 1 day interval, you should set every missing day data to 0.
score:5
I've thorougly searched the API reference of HighCharts, but they don't offer that option. What they do offer is the option to disable the connection of points when null
data is in between (only line and area charts):
var chart = new Highcharts.Chart({
plotOptions: {
line: {
connectNulls: false
}
}
});
This is the default setting according to the API, so I'm not sure why your data does connect with null
values in between. Maybe they have changed the defaults lately?
I feel this is a good representation of your data, because defaulting null
to 0
seems misleading.
Source: stackoverflow.com
Related Query
- How to make highcharts default to 0 for missing data
- Highcharts how to make a set number of colors for pie chart data and drilldown data
- How to format datetime for (x,y) pair data for Highcharts
- How to format my json data for stack column chart in HighCharts
- Set zero for missing data in highcharts
- How To Show All Data Labels For Datetime Axis In Highcharts
- How to make Highcharts fetch data from external JSON file?
- How to create data in Json format for highcharts
- Highcharts - how to set textShadow for data labels
- How to make legend color show up in Highcharts for a line graph under certain conditions?
- How to make buttons filter different data based on a category they select in Highcharts heatmap?
- How to make the Y Axis values not start from 0 in highcharts? How to display forcefully display the last category data on X axis in HighCharts ?
- how to continue the graph line when missing series of data in middle of highcharts
- Highcharts display label for pie chart using html table as data source
- Highcharts how to make legends as data labels on scatter plot
- How Highcharts ChartView redraw or wait for AsyncTask data in Android
- How to make hover effect for two bar in highcharts at the same time is there any way by using css or any inbuilt method to achieve this?
- HTML table as data source for highstock charts using highcharts
- How to show horizontal line instead of a dot for a single value data in highcharts
- How to have multiple highcharts with different series data in vuejs without repeating code
- How can I update the data in highcharts for both x axis & y axis?
- Using a flask variable as data source for highcharts
- how do you create custom buttons with highcharts that each data buttons calls anather php script for its data
- how to make Highcharts React redraw without changing data
- How do I customize link style for each data link in a Highcharts network graph?
- how to display data labels / stacklabels for a grouped highhcarts- Highcharts
- Highcharts - How would I use HTML input boxes to input the data for a Pie Chart?
- Error: Data source must be a URL for refresh | console error | javascript | Highcharts
- how to make chart real time with 2 line and get data from php with highcharts
- How to make border for sparkline highcharts table?
More Query from same tag
- Switch between pie charts and bar chart in highcharts
- Highcharts start reversed y-axis at 1 for ranking graph
- Google Line Chart: drag to adjust value
- Highcharts Bar Extend past MaxValue
- Highstock navigator does not work when also importing "highcharts-more" file
- Rich HTML Annotations in HighCharts
- creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
- HighChart with multple JSON api data
- Highcharts drilldown on area chart
- remove series by name or id in highcharts
- Highcharts exporting once again
- how to dynamically change array in highchart?
- Highcharts not aligning to ticks
- Alignment issue in High chart's bar chart
- Include Third party Charting plugins with ExtJs 5
- Highcharts: Show special marker on column chart
- highchart - how to deal with flags overlapping problem?
- drawing start and end time as intervall in one thick line
- put labels on the right of the chart area in HighCharts
- Getting "Highcharts error #17" when creating histogram (using Highcharts with Angular 6)
- can't get data-labels in highcharts-export-server on live server
- Importing JSON file into Highcharts for Bar Chart Visualization
- Regarding High charts for Angular 2
- HighCharts.js - Trying to import highstock
- How to set plot area width and height in Highcharts?
- highChart pdf download
- xAxis Categories Highcharts
- json date format to Highcharts date format
- Highcharts yAxis max not working
- highcharts - donut chart - Labels inside and outside