i have created a highchart and data i took it from csv file.The chart is working good and plotting fine.But my problem is when the page refreshes it is not taking the latest value from the csv file.It still displays the old chart.when i close the browser and re-open the chart works fine.Please help me how to reset/redraw with updated value from csv
Below is my code. This problem IE not in firefox
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Support Trending P1,P2 & P3'
},
xAxis: {
categories: []
},
yAxis: {
showLastLabel:true,
tickInterval:5,
title: {
text: ""
}
},
series: []
};
$.get('../data/trending.txt', function(data) {
// Split the lines
var lines = data.split(';');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
var chart = new Highcharts.Chart(options);
});
});
Blockquote
It looks like your chart data is being cached, and not being refreshed by the browser. Without code, it's card to know how to fix it.
If you are using jquery $.ajax, there is an option
cache:false
Which may help. http://api.jquery.com/jQuery.ajax/
Related
I am using a gauge widget from c3 library.
It's function are composed by 3 elements:
function(Value, width, height)
When I try to generate the dashboard, the result is this one:
I am using this layout:
splitLayout(C3GaugeOutput("gauge1","auto","auto"),
C3GaugeOutput("gauge2","auto","auto"),
C3GaugeOutput("gauge3","auto","auto"))
I tryied changed the dimensions, but this side bar still appears.
The C3 code is the following:
HTMLWidgets.widget({
name: 'C3Gauge',
type: 'output',
factory: function(el, width, height) {
return {
renderValue: function(x) {
// Check if we have a reference to our chart
if(typeof(el.chart) == 'undefined'){
// create a chart and set options
// note that via the c3.js API we bind the chart to the element with id equal to chart1
var chart = c3.generate({
bindto: el,
data: {
json: x,
type: 'gauge',
},
gauge: {
label:{
//returning here the value and not the ratio
format: function(value, ratio){ return value;}
},
min: 0,
max: 100,
width: 15,
units: '%' //this is only the text for the label
}
});
el.chart = chart;
}else{
// Update the chart if it already exists
el.chart.load({json: x});
}
},
resize: function(width, height) {
// TODO: code to re-render the widget with a new size
}
};
}
});
Solved:
Using box() function:
fluidRow(box(C3GaugeOutput("gauge1","auto","auto")),
box(C3GaugeOutput("gauge2","auto","auto")),
box(C3GaugeOutput("gauge3","auto","auto")))
my first time using chart.js and am running into a small bug that I can't seem to work around it. Below is my code, however, its just displaying the labels but not rendering the pie chart itself.
Am following samples from the chart.js documentation here http://www.chartjs.org/docs/#doughnut-pie-chart-example-usage
Your help will be appreciated.
<canvas id="myChart" width="200" height="200"></canvas>
$(document).ready(function () {
/*
-> #47A508 = green (wins)
-> #ff6a00 = orange (losses)
-> #ffd800 = yellow (draws)
*/
var DataArray = [];
var ctx = document.getElementById("myChart");
$.ajax({
url: 'http://api.football-data.org/v1/competitions/426/leagueTable',
dataType: 'json',
type: 'GET',
}).done(function (result) {
$.each(result.standing, function () {
var name = "Manchester United FC";
if (this.teamName == name) {
DataArray.push([this.wins, this.losses, this.draws]);
}
});
var myChart = new Chart(ctx, {
type: 'pie',
data: {
label: 'Manchester United Current Form',
labels: [
"Wins",
"Losses",
"Draws"
],
datasets: [
{
data: DataArray,
backgroundColor: [
"#47A508",
"#ff6a00",
"#ffd800"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
},
options: { responsive: true }
});
});
}
maybe it is because of the jquery each, it fills DataArray async and the array is not ready, when you want to use it as chart data.
Change the $.each to a simple js for loop
for(var i = 0; i < result.standing; i++){
var name = "Manchester United FC";
var team = result.standing[i];
if (team.teamName == name) {
DataArray.push(team.wins, team.losses, team.draws);
}
}
try callbacks for you ajax or do the below (which is a dirty solution):
$.ajax({
url: 'http://api.football-data.org/v1/competitions/426/leagueTable',
dataType: 'json',
cache: false, //add this
async: false, //add this
type: 'GET',
Also
the result of your ajax could be returned using the below code instead of using an array.
jQuery.parseJSON(result);
The issue lies in your DataArray. The way it is implemented is is an array with a single entry. Which is another array itself.
[[<wins>, <losses>, <draws>]]
instead of
[<wins>, <losses>, <draws>]
That is because you instantiate an array and then push into it an array object.
To fix this try using the following function:
(...)
$.each(result.standing, function () {
var name = "Manchester United FC";
if (this.teamName == name) {
DataArray = ([this.wins, this.losses, this.draws]);
console.log("This team name");
}
});
(...)
I got this solved, well sadly, with no magic at all to brag about. There was nothing wrong with the code initially, however, it was a problem with the DOM rendering performance. Thank you #alwaysVBNET and #Aniko Litvanyi for your inputs as well.
This link helped me out, hopefully it does to someone out there.
I am learning to use Google Charts and I'm trying to get an average of all values and show a line on the chart to represent the average.
Below is an of how my chart looks but I need an average line for all the values.
thanks in advance for your attention.
<html>
<body style="font-family: Arial;border: 0 none;">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard" style="width:1300px;overflow:scroll;">
<div id="chart" style="position: relative; width: 1300px; height: 300px;"></div>
<div id="control" style="position: relative; width: 1300px; height: 30px;"></div>
</div>
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
var query = new google.visualization.Query('xxxxxxx');
query.setQuery('select A,B,C,D');
query.send(function (response) {
if (response.isError()) {
console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'ScatterChart',
chartOptions: {
pointSize: 2,
chartArea: {width: '90%'},
hAxis: {format: 'dd/MM/yyyy'}
},
chartView: {
columns: [ 0, 1, 2]
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'SteppedAreaChart',
containerId: 'chart',
options: {
filterColumnIndex: 0,
pointSize: 2,
chartArea: {height: '80%', 'width': '90%'},
hAxis: {format: 'E dd/MMM','textStyle':{'fontSize': 11, 'color': 'black','bold':true},'minTextSpacing': 0, 'slantedText': false},
vAxis: {format: '0'},
legend: {position: 'top'},
bar: {groupWidth: '100%'},
isStacked: false
},
view: {
columns: [ 0, 1,2]
}
});
var proxyTable = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'TableProxy',
options: {
page: 'enable',
pageSize: 1
},
view: {
columns: [0]
}
});
google.visualization.events.addListener(proxyTable, 'ready', function () {
var dt = proxyTable.getDataTable();
var groupedData = google.visualization.data.group(dt, [0], [{
column: 2,
type: 'number',
aggregation: google.visualization.data.avg
}]);
chart.setDataTable(groupedData);
chart.draw();
});
google.visualization.events.addListener(proxyTable, 'ready', function () {
var group = google.visualization.data.group(proxyTable.getDataTable(), [{
column: 0,
type: 'date',
modifier: function () {
return 1;
}
}], [{
column: 2,
type: 'number',
aggregation: google.visualization.data.avg
}]);
});
dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(control, chart);
dashboard.draw(response.getDataTable());
});
},
packages: ['controls', 'corechart', 'table'], 'language': 'pt-br'
});
</script>
</body>
</html>
It's possible to group by date (code bellow)...but the main difficult thing to do is how to use the controlType: 'ChartRangeFilter'. Anyone has any idea??
function floorDate(datetime) {
var newDate = new Date(datetime);
newDate.setHours(0);
newDate.setMinutes(0);
newDate.setSeconds(0);
return newDate;
}
var columnChart1 = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart3'
});
// columnChart1.draw();
// Create the dashboard.
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure & bind the controls
bind(divPicker, [table, columnChart]).
// Draw the dashboard
draw(data);
google.visualization.events.addListener(divPicker, 'ready',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart1.setDataTable(google.visualization.data.group(
// get the filtered results
table.getDataTable(), [{
'column': 0,
'modifier': floorDate,
'type': 'date'
}], [{
'column': 2,
'aggregation': google.visualization.data.sum,
'type': 'number'
}]
));
// redraw the pie chart to reflect changes
columnChart1.draw();
});
google.visualization.events.addListener(divPicker, 'statechange',
function(event) {
// group the data of the filtered table and set the result in the pie chart.
columnChart1.setDataTable(google.visualization.data.group(table.getDataTable(), [0], [{
'column': 2,
'aggregation': google.visualization.data.avg,
'type': 'number'
}]));
// redraw the pie chart to reflect changes
columnChart1.draw();
});
}
google.setOnLoadCallback(drawVisualization);
</script>
You should be able to make use of a trendline.
A trendline is a line superimposed on a chart revealing the overall direction of the data. Google Charts can automatically generate trendlines for Scatter Charts, Bar Charts, Column Charts, and Line Charts.
Guessing from the given code, you may want to add trendlines: { 0: {} } to the chartOptions for your control variable.
Putting your code into a jsFiddle or a Codepen would make it easier to debug and show you a valid solution to your particular problem.
I appreciate this is a little old, but my searching found this and wanted to help further.
Adding a trendline gives a data's trend (increasing, decreasing) and not really the average. I cannot claim this answer as mine, please see https://groups.google.com/forum/#!topic/google-chart-api/UOdUFszYSRc
As Tom suggests I actually use the combo chart and compute a second series, but as your charts are quite complex you may wish to use the API method, which his JSFiddle (found in the link above) shows working - thanks Tom.
According to my own question
i have tried something, and my fiddle is link
But i want to be output as like below
i.e x axis contains monthly reports
my ajax code is
$.ajax({
url: "/echo/json/",
data: data,
type: "POST",
success: function(point) {
var chartSeriesData = [];
var chartCategory = [];
$.each(point, function(i, item) {
var series_name = item.resultDate;
var series_data = item.y;
var cagory = series_name;
var series = {
name: series_name,
data: item.y
};
chartSeriesData.push(series);
chartCategory.push(series_name);
});
var chartingOptions = {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline'
},
xAxis: {
categories: chartCategory
},
series: chartSeriesData
};
chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
chart = new Highcharts.Chart(chartingOptions);
}
});
Thanking you....
In your parser, you create many series, because you initialize series in points loop. So you should prepare series earlier than points loop. Then add points to correct serie (in this case first or second serie).
I want to be able to convert a html form to an ExtJs form. I have read that you have to do something with applyTo but wasn't really sure about what to do.
I hope someone can provide me with some help,
Cheers
If you want to convert every element in a form to an ExtJS element, someone on the Sencha forums has posted a solution (which I will cross-post here):
function convertForm(formId) {
var frm = new Ext.form.BasicForm(formId);
//frm.render();
var fields = frm.getValues()
for (key in fields) {
var elem = Ext.get(key);
if (elem && elem.hasClass('combo-box')) {
var cb = new Ext.form.ComboBox({
transform: elem.dom.name,
typeAhead: true,
triggerAction: 'all',
width: elem.getWidth(),
forceSelection: true
});
}
else
if (elem && elem.hasClass('date-picker')) {
var df = new Ext.form.DateField({
format: 'm/d/Y'
});
df.applyTo(elem.dom.name);
}
if (elem && elem.hasClass('resizeable')) {
var dwrapped = new Ext.Resizable(elem, {
wrap: true,
pinned: true,
width: 400,
height: 150,
minWidth: 200,
minHeight: 50,
dynamic: true
});
}
}
}
Additionally, who is interested, buttons can be converted too:
var objArray = Ext.DomQuery.select("input[type=button]");
Ext.each(objArray, function(obj) {
var btn = new Ext.Button({
text : obj.value,
applyTo : obj,
handler : obj.onclick,
type : obj.type
});
btn.getEl().replace(Ext.get(obj));
});
Information was found here (not in English, sorry).