I receive an array json object. And now I don't know how I can process it in javascript code to series section data. I use this example of highchart column-rotated-labels. In this object has two columns AVG and other title, and length of this object might 20.
This is my codes:
$('#showresult').click(function() {
$.ajax({
url : "../../coursestatus",
type : "get",
data : {
major : $('#get').val(),
year : $('#yearlist').val(),
semester : $('#semester').val()
},
success : function(data) {
alert(data.length);
$(function () {
$('#container').highcharts({
chart: { type: 'column'
},
title: { text: 'World\'s largest cities per 2014' },
xAxis: {
type: 'category',
labels: {
rotation: -45,
}
},
yAxis: { min: 0,
title: {
text: 'Population (millions)'
} },
legend: { enabled: false },
tooltip: { pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>' },
series: [{ // I don't know how I can process data object to set that's elements to this
name: 'Population',
data: [
JSON.parse("[" + data + "]")
],
dataLabels: { enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: { fontSize: '13px',
fontFamily: 'Verdana, sans-serif', textShadow: '0 0 3px black'
}
}
}]
});
});
And this object include this elements:
title columns includes course name and avg columns includes mark for that course.
And this is data is in data object:
[{"title":"Math","avg":20},{"title":"Network","avg":18},{"title":"Operating system","avg":16}]
And above data is has 3 length and it is simple, in fact this object maybe that's length is >10.
Thank u!
I founded similar problem in this page and I solved my problem.
Populate Highcharts with JSON data using jQuery
Related
My chart is plotting x-axis points from Jan 1 1970. My js is below. Is the format of my x-coordinates what is causing the problem, and if so, how can I get these dates right?
var chart = new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
datasets: [{
data: [{x:15-04-2018,y:10},{x:16-04-2018,y:20},{x:17-04-2018,y:30}],
borderColor: '#3e95cd',
fill: false
}]},
options: {
scales: {
xAxes: [{
type: 'time',
unit: 'day' ,
distribution: 'linear',
ticks: { source: 'data' },
time: { displayFormats: { day: 'MMM DD' } }
}]
},
title: {
display: true,
text: 'Student Assessment Cluster Scores'
},
} });
The date values must be entered as a javascript Date object. Just like the documentation says,
data: [{
x: new Date(),
y: 1
}, {
t: new Date(),
y: 10
}]
So in my question, the dates could be represented by:
data: [
{x:new date(15-04-2018),y:10},
{x:new date(16-04-2018),y:20},
{x:new date(17-04-2018),y:30}
]
I have a chart.js bar chart that pulls data via an ajax call to a Django APIView. The ajax call returns one dictionary with a stack of data inside I use to customize the chart. Here's the chart.js code:
var current_year = '{% url "saveskore:api-current-year-savings" %}'
$.ajax({
url: current_year,
type: 'GET',
cache: false,
dataType: 'json',
success: function(data) {
var ctx = document.getElementById('current-year-chart');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: data['dates'],
datasets: [
{
label: data['income_label'],
backgroundColor: "#8e5ea2",
data: data['income'],
},
{
label: data['expense_label'],
backgroundColor: 'green',
data: data['expenses'],
},
{
label: data['savings_label'],
backgroundColor: "#3e95cd",
data: data['savings_goal'],
},
{
label: data['avail_label'],
backgroundColor: "#pink",
data: data['avail_to_spend'],
},
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Savings for ' + data['year']
}
}
});
}
});
Works great. Looks great.
But! I have a django formset on a separate page that updates the table data that the chart pulls from.
When I update the data in the formset and submit, redirecting to the chart page ... NO UPDATE OCCURS.
If I make some code change or otherwise reload the browser, VOILA, the chart updates.
I have read about either cache=false and chart.update(), but find i have not been able to make either work, mainly because the exact details on their use are not clear.
I would really appreciate input on this.
Have you tried chart.destroy() method ? and then build again the chart with the new data .. that works for me.. take a look at my example
let flag = 0;
var xChart = "";
function dibujar(valor, meses) {
try {
if (valor.length > 0) {
$('#grafico').fadeIn('fast');
var canvas = document.getElementById('chart');
let tipGra = $('#slcTipGra').val();
if (flag !== 0) {
xChart.destroy();
}
//rgba(54, 162, 235, 0.2)
if (tipGra === "bar" || tipGra === "horizontalBar") {
var data = {
labels: meses,
datasets: [
{
label: "Dólares($)",
backgroundColor: "#3e95cd",
borderColor: "#3e95cd",
borderWidth: 2,
hoverBackgroundColor: "#3e95cd",
hoverBorderColor: "#3e95cd",
data: valor,
}
]
};
var option = {
title: {
display: true,
fontSize: 20,
fontFamily: 'Helvetica',
text: 'Reporte Mensual de Ventas'
},
plugins: {
datalabels: {
color: 'white',
anchor: 'end',
align: 'start',
font:
{
weight: 'bold'
}
}
},
scales: {
yAxes: [{
stacked: true,
gridLines:
{
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true
}
}]
}
};
}
if (tipGra === 'line') {
var data = {
labels: meses,
datasets: [
{
label: "Dólares($)",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: valor,
}
]
};
var option = {
title: {
display: true,
fontSize: 20,
fontFamily: 'Helvetica',
text: 'Reporte Mensual de Ventas'
},
plugins: {
datalabels: {
backgroundColor: function (context) {
return context.dataset.borderColor;
},
borderRadius: 4,
color: 'white',
anchor: 'end',
align: 'end',
}
},
showLines: true
};
}
xChart = new Chart(canvas,
{
type: tipGra,
data: data,
options: option
});
flag = 1;
}
else {
$('#grafico').fadeOut('fast');
$('#graficoMessage').fadeIn('slow');
}
} catch (err) {
console.log(err);
}
}
I declare "xChart" as a global variable and a flag to know if it's the first chart to build. The example build 3 different types of charts (Vertical Bar, Horizontal Bar and Line) depending on the selection of the chart type "let tipGra = "$('#slcTipGra').val();"
I would like to include a series to my existing chart.
daytime = new Highcharts.Chart({
chart: {
renderTo: 'daytime_div',
defaultSeriesType: 'areaspline',
events: {
load: getData()
}
},
plotOptions: {
series: {
fillOpacity: 0.1,
lineWidth: 4,
marker: {
radius: 5,
lineWidth: 1,
lineColor: "#FFFFFF"
}
}
},
tooltip: {
formatter: function () {
var s = [];
$.each(this.points, function (i, point) {
s.push('<span style="font-size:10px;">' + point.key + '</span><br/><strong>' + point.series.name + '</strong> : ' + point.y + '</span>');
});
return s.join('<br/>');
},
shared: true,
useHTML: true
},
credits: false,
title: false,
exporting: false,
legend: {
itemDistance: 50,
itemStyle: {
color: '#333'
}
},
xAxis: {
labels: {
staggerLines: 2
}
},
yAxis: {
gridLineColor: "#e7e7e7",
title: {
text: ''
},
labels: {
x: 15,
y: 15,
style: {
color: "#999999",
fontSize: "10px"
}
},
},
series: [{
name: 'Daily',
color: "#b18eda",
data: ddata
}]
});
function getData() {
$.ajax({
url: '...',
type: "POST",
contentType: "application/json; charset=utf-8",
data: data,
success: function (f) {
var categories = [];
var series_data = [];
$.each(f.d, function (i, e) {
categories.push(e.hour);
series_data.push(parseInt(e.numa));
});
daytime.xAxis[0].setCategories(categories);
daytime.series[0].setData(series_data);
},
cache: false
});
}
The data I get from my database looks like this:
hour, numa
12 AM 1
1 AM 0
2 AM 0
3 AM 0
4 AM 0
This shows one line in the chart which is fine. I would like to add a second line that will come from a different query. The second line data will look like:
hour, numa
12 AM 0
1 AM 12
2 AM 3
3 AM 2
4 AM 2
Does anyone knows how could I include this into my second series? I have seen the sample in high charts on how to add more series. Static is pretty simple but getting the data dynamically make it more complicated to figure it out.
I am trying to find a way to add 2 series to my getData() function. Any idea will be appreciate it thanks.
It is explained clearly in the fiddle of the document which you shared on how to add multiple series.
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
You can pass multiple series in array and the chart can be generated.
EDIT-1
If data from different series use this fiddle.
var myComments=["First input","second comment","another comment","last comment"]
var dataValues = [29.9, 71.5, 194.1, 129.2];
var dataValues2 = [194.1, 95.6, 194.1, 29.9];
var categories = ['Jan', 'Feb', 'Mar', 'Apr'];
var n=['tooltip1','tooltip2','tooltip3','tooltip4'];
$(function () {
$('#container').highcharts({
chart: {},
tooltip: {
formatter: function () {
var serieI = this.series.index;
var index = categories.indexOf(this.x);
var comment = myComments[index];
return '-->'+comment;
}
},
xAxis: {
categories: categories
},
series: [{
data: dataValues
}, {
data: dataValues2
}]
});
});
which results in the below graph
Well you can use $.when() and load there all your ajax and in $.then() initialise chart. Second solution is prepare your query to database and return all data in single json.
I am using highcharts in my MVC3 application and I am trying to refresh once the data is modified but the chart doesnot refresh.
I am drawing the chart as follows:-
function initializeChart() {
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'funnel'
},
title: {
text: 'Deal Funnel Stats',
x: -50
},
legend: {
enabled: false
},
exporting: {
buttons: {
exportButton: {
enabled:false
},
printButton: {
enabled:false
}
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: 'black',
softConnector: true
},
neckWidth: '0%',
neckHeight: '0%'
//-- Other available options
// height: pixels or percent
// width: pixels or percent
}
},
series: [{
data: #Html.Raw(Model.seriesData)
}]
});
}
Model.seriesData is coming from the the class.
Once the data is refreshed i want to reinitialize the chart with new data but it is again drawing the same chart.
Update:
The data I am having first time is:
The data I am having second time is:
Please help.
Thanks.
I am trying to have a live graph of bitcoins that can be running long term with two datasets buy and sell using HighStocks the problem is the data is all live so the graph starts with no data and gets an update every 30 seconds and in those conditions HighStocks doesn't always seem to play nice
I have created a demo which is very close to the final code http://jsfiddle.net/v3z6T/2/! the increment is set to 1 second to speed up the demo, also if you change adaptToUpdatedData to true this has significant lag effects until the lowest navigator interval is exceeded (30s) so be careful
I want the navigator area to work but if i leave it updating with adaptToUpdatedData : true
The graph is very laggy after a short time and I can't leave it running for hours without the whole browser starting to not respond and getting script delay errors
This is strange to me as running for example 8 hours at 30second increments is only 960 data points, not enough to use as much processing and memory as it seems to
If adaptToUpdatedData is false the graph is much faster and the updates stream in ok until one of the navigation buttons is used then the graph is no longer 'live' as the new updates are out of scope, also the navigator starts at 1970 rather than the start of the series data
Does anyone know a way to trigger a navigator refresh or something I can call when I add a new data point that will keep the navigator area updated and keep the graph at the latest data entry point and not stop the page from rendering in a timely fashion? or a better way of using the api or data
Hope that makes sense
The whole idea of this graph is to be kept running for days possibly weeks to get a live view of the data as its progressing and I cant use the handling large datasets example code from HighStocks as the data is all live, not to mention I am not really working with large datasets anyway just constant slow updates
$(function()
{
var curTime = $.now();
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'chartContainer',
zoomType: 'x',
turboThreshold:100,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false
},
rangeSelector: {
buttons: [{
count: 30,
type: 'second',
text: '30S'
},{
count: 5,
type: 'minute',
text: '5M'
},{
count: 30,
type: 'minute',
text: '30M'
},{
count: 60,
type: 'minute',
text: '1H'
},{
count: 360,
type: 'minute',
text: '6H'
},{
count: 720,
type: 'minute',
text: '12H'
},{
count: 1,
type: 'day',
text: '1D'
},{
type: 'all',
text: 'All'
}],
inputEnabled: false
},
scrollbar: {
liveRedraw: false
},
title : {
text : 'Live Bitcoin Data'
},
exporting: {
enabled: true
},
navigation: {
buttonOptions: {
theme: {
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
}
},
navigator : {
adaptToUpdatedData: false
},
yAxis: {
title: {
text: 'Price'
}
},
xAxis: {
type: 'datetime'
},
credits: {
enabled: false
},
series: [{
name: 'Sell',
color: '#00FF00',
pointStart: $.now(),
data : [],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 3,
valuePrefix:"$"
}
},{
name: 'Buy',
color: '#FF00FF',
pointStart: $.now(),
data : [],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 3,
valuePrefix:"$"
}
}]
});
setInterval(function() {
var chart = $('#chartContainer').highcharts();
var exchangeSellRate = Math.floor(Math.random()*30)+40;
var exchangeBuyRate = Math.floor(Math.random()*30)+40;
var x = $.now();
chart.series[0].addPoint([x,exchangeSellRate],false,false);
chart.series[1].addPoint([x,exchangeBuyRate],true,false);
}, 1000);
});