Two highchart update issue - javascript

I have two line chart that are identical and use same data.
I have written an update code that update both the charts:
c2updateLineGraph(2,[[0, 105993],[25, 659727],[50, 648727],[75, 636627],[100, 636627]]);
function c2updateLineGraph(index,data)
{
c2chart1.series[index].setData(data, true);
c2chart1p.series[index].setData(data, true);
}
My data structure is:
var c2graphdata=[{
name: 'Current year',
data: []
},
{
name: 'Reapair v1',
data: []
},
{
name: 'Repair v2',
data: []
},
{
name: 'Replacement v1',
data: []
},
{
name: 'Replacement v2',
data: []
},
{
name: 'Facelift v1',
data: []
},
{
name: 'Facelift v2',
data: []
},
{
name: 'Reconstruction v1',
data: []
},
{
name: 'Reconstruction v2',
data: []
},
];
Issue is c2chart1 is getting updated, but not c2chart1p. Trick is if I swap the position of c2chart1 and c2chart1p, then c2chart1p get updated only.
I could replicate the issue here jsfiddle.net/hhh2zx3w Check after 8 secs only chart1 gets updated, not chart2

Reset the graph data and setting the data agin will work for you . just change
function c2updateLineGraph(index, data) {
c2chart1.series[index].setData(data, true);
c2chart1p.series[index].setData(c2graphdata, true); //reset the graph data
c2chart1p.series[index].setData(data, true);
}
Updated fiddle:
http://jsfiddle.net/hhh2zx3w/2/
Hope it helps

Related

Use fields from data() as chart data - FusionCharts

I want to show simple charts using Vue 2 and FusionCharts. I'm fetching my data from firebase and I run some calculations before I can fetch this to FusionCharts component. As these calculations are performed the result is stored in values in Vue's data function. I was following this link here. Problem is it defines chartData outside the export default. My question is how do i use values in my data function to populate my chart? My code looks something like this:
export default {
name: "dash",
data: () => ({
users: [],
total: 0,
activeCount: 0,
maleCount: 0,
femaleCount: 0,
newUssrs: 0
}),
computed: {
chartData: [
{
label: "Male",
value: this.maleCount
},
{
label: "Female",
value: this.femaleCount
}
],
dataSrc: {
chart: {
caption: "Total User Count",
subcaption: "",
xaxisname: "Gender",
yaxisname: "User counts",
numbersuffix: "",
theme: "fusion"
},
data: this.chartData
}
},
mounted() {
this.getData();
}
};
computed properties need to be functions which return the computed data. Like:
computed: {
chartData() {
return [
{
label: "Male",
value: this.maleCount
},
{
label: "Female",
value: this.femaleCount
}
]
},
dataSrc() {
return {
chart: {
caption: "Total User Count",
subcaption: "",
xaxisname: "Gender",
yaxisname: "User counts",
numbersuffix: "",
theme: "fusion"
},
data: this.chartData
}
}
},

highcharts doesn't read data, works with fake data

I'm trying to make visualization of the voltage, Array has 1k elements but I'm testing it on first 10 for now, the thing is that It doesn't display anything, what's more interesting when I use fake date which is commented out now, It shows chart properly. I thought that perhaps there is some problem with array so tried to use Array.from but it also brought no effect, here is my code:
.then(function(res) {
var averageVoltage = []
var inputVoltage = []
var date = []
for (var i = 0; i < 10; i++) {
if (res[i].average_volatage !== undefined) {
averageVoltage.push(res[i].average_volatage)
date.push(res[i].timestamp)
}
}
console.log(averageVoltage)
console.log(date)
Highcharts.chart('battery_chart', {
chart: {
type: 'line'
},
title: {
text: id
},
yAxis: {
title: {
text: 'Measurement'
},
},
xAxis: {
categories: date
},
series: [{
name: 'Average Voltage',
data: averageVoltage
// data: [12283, 12283, 12281, 12280, 12282, 12283, 12281, 12282, 12281, 12280]
},
]
});
and that's how array is shown in console.log:
Your array should show up as [12283, 12281, 12280, etc.] in console as well, instead it shows up as [Number, Number, ...]. Try changing this line:
averageVoltage.push(res[i].average_volatage)
to:
averageVoltage.push(parseInt(res[i].average_volatage))
Additionally, instead of using dates as categories, it could be easier to use the highchart datetime axis. This would let you manipulate how you want the date displayed, have several series with different timestamps in one graph, and many other things. To get this to work, you could do this:
.then(function(res) {
var averageVoltage = []
var inputVoltage = []
for (var i = 0; i < 10; i++) {
if (res[i].average_volatage !== undefined) {
averageVoltage.push({x: new Date(res[i].timestamp).getTime(), y: parseInt(res[i].average_volatage)})
}
}
console.log(averageVoltage)
Highcharts.chart('battery_chart', {
chart: {
type: 'line'
},
title: {
text: id
},
yAxis: {
title: {
text: 'Measurement'
},
},
xAxis: {
type: 'datetime'
},
series: [{
name: 'Average Voltage',
data: averageVoltage
},
]
});

Autocomplete Suggestions based on file names

I am trying to use this tutorial to make an autocomplete recommendation populated by a list of files in a folder 'template'. How can I modify the JS code to show recommendations based on file names in the template folder instead of the listed generated in the sample code?
I am using this tutorial.
$(function(){
var currencies = [
{ value: 'Afghan afghani', data: 'AFN' },
{ value: 'Albanian lek', data: 'ALL' },
{ value: 'Algerian dinar', data: 'DZD' },
{ value: 'European euro', data: 'EUR' },
{ value: 'Angolan kwanza', data: 'AOA' },
{ value: 'East Caribbean dollar', data: 'XCD' },
...
{ value: 'Vietnamese dong', data: 'VND' },
{ value: 'Yemeni rial', data: 'YER' },
{ value: 'Zambian kwacha', data: 'ZMK' },
{ value: 'Zimbabwean dollar', data: 'ZWD' },
];

Typeahead js with dynamic multiple datasets

In typeahead js while using multiple data-sets (as seen here typeahed multiple datasets) each category is sent as a separate parameter while initialising the typeahead. Is it possible to have dynamic categories from a single data source instead of multiple data sources.
$('#multiple-datasets .typeahead').typeahead({
highlight: true
},
{
name: 'nba-teams',
display: 'team',
source: nbaTeams,
templates: {
header: '<h3 class="league-name">NBA Teams</h3>'
}
},
{
name: 'nhl-teams',
display: 'team',
source: nhlTeams,
templates: {
header: '<h3 class="league-name">NHL Teams</h3>'
}
});
Here nba-teams and nhl-teams are sent as separate parameters to typeahead().IS there a way to send N datasets or specify the category the data belongs to like
data = [
{ value: 'Chicago Blackhawks', data: { category: 'NHL' } },
{ value: 'Chicago Bulls', data: { category: 'NBA' } },
{ value: 'LA Galaxy', data: { category: 'MLS' } },
{ value: 'Seattle Founders', data: { category: 'MLS' } },
]
try using signature: typeahead(options, [*datasets]); it worked for me with the latest version combiined with Bloodhound object for source property.
* ref-usage(internal project)

google charts : table chart - get values from object-literal notation datasource

Considering the below data source and Listener function.
Data Source
var data = new google.visualization.DataTable(
{
cols: [{ type: 'string', label: 'Col1' },
{ type: 'number', label: 'col2' },
{ type: 'boolean', label: 'MyBoolean' }],
rows: [
{ c: [{ v: 'data1' }, { v: 1 }, {v: false}] },
{ c: [{ v: 'data2' }, { v: 2 }, {v:true}] }
]
});
Listener Function :
function ChartSelect()
{
var selectedItem = chart.getSelection()[0];
console.log(dataSource.getValue(selectedItem.row, 1));
}
I know below line will throw error
console.log(dataSource.getValue(selectedItem.row, 1));
Considering i clicked on first row, how can i read the second element of the datasource (i.e '1')?
Thank you
Got it, Its nothing more than fetching values from java script objects in object-literal-notation.
var selectedItem = chart.getSelection()[0]; // considering user clicked on first row
data["rows"][selectedItem.row]["c"][1]["v"] // will do the trick.

Categories