I am trying to use spark-line graph. I am passing values to graph as a JavaScript variable. But it is not displaying. But I surprised when I give same value as constant/static. It displays Correctly. Here is the my code :-
r("#sp-tristate-bar-total-revenue").sparkline([1,21,31,12], {
type: "bar",
width: "100%",
height: "30px",
barWidth: 4,
barSpacing: 6,
barColor: "#16D39A"
}
This above code working fine but If I take these values in Javascript variable like following code, graph does not work:-
var graph_val='1,21,31,12';
r("#sp-tristate-bar-total-revenue").sparkline([graph_val], {
type: "bar",
width: "100%",
height: "30px",
barWidth: 4,
barSpacing: 6,
barColor: "#16D39A"
});
Please help me to get rid of this.
You put the string inside an array as a single element, you need to instead generate the array of create one.
Option 1: Split string into array
var graph_val='1,21,31,12';
r("#sp-tristate-bar-total-revenue").sparkline(graph_val.split(','), {
Option 2: Write the vals as an array
var graph_val=[1,21,31,12];
r("#sp-tristate-bar-total-revenue").sparkline(graph_val, {
the second piece of code does not initialize an array as the first.
try this:
var graph_val=[1,21,31,12];
You want the variable to be an array. So var graph_val = [1,21,31,12] is what you need.
var graph_val=[1,21,31,12];
r("#sp-tristate-bar-total-revenue").sparkline(graph_val, {
type: "bar",
width: "100%",
height: "30px",
barWidth: 4,
barSpacing: 6,
barColor: "#16D39A"
});
UPDATE:
In the comments you mentioned the value coming from $("#id").text() as '2,5,3,6,8'. You can turn the comma delimitered string to an integer array like this:
graph_val = $("#id").text().split(',');
for (a in graph_val ) {
graph_val[a] = parseInt(graph_val[a]);
}
r("#sp-tristate-bar-total-revenue").sparkline(graph_val, {
type: "bar",
width: "100%",
height: "30px",
barWidth: 4,
barSpacing: 6,
barColor: "#16D39A"
});
Example: https://jsfiddle.net/w49mpetp/2/
Related
I am trying to pass a Series number in a Google Chart option through a variable. However it is not accepting it as a variable and instead is taking it as a string. You can see in Image1 that I have passed in Series parameter SecondseriesColumnNumber as a variable and value is 1.
Image 1
However in the output it is considering it as a string but not as the series number as shown below
Image 2
Other parameters are considering the values correctly but not the series one. How can I make this work? My code is below
var options = {
title: title,
width: width,
height: height,
bar: { groupWidth: '75%' },
chartArea: { left: "8%", right: "8%", top: "10%", width: "100%", height: "75%" },
backgroundColor: 'transparent',
tooltip: { textStyle: { color: 'black' }, isHtml: true },
isStacked: isStacked,
seriesType: seriesType,
series: { SecondseriesColumnNumber: { type: SecondseriesType } },
hAxis: { slantedText: true }
};
var chart = new google.visualization.ComboChart($('DivSeries')[0]);
the problem has to do with JavaScript syntax.
you are not able to use a variable as a key in the definition of an object.
you must first create the object, then you can add additional keys using variables.
there are two ways to get / set values of object keys, once the object is defined.
both of the following will return the same value for title.
var title = options.title;
var title = options['title'];
where as in the latter, we can substitute a variable for the title key.
var key = 'title';
var title = options[key];
in this case, define the static options as needed.
var options = {
title: title,
width: width,
height: height,
bar: { groupWidth: '75%' },
chartArea: { left: "8%", right: "8%", top: "10%", width: "100%", height: "75%" },
backgroundColor: 'transparent',
tooltip: { textStyle: { color: 'black' }, isHtml: true },
isStacked: isStacked,
seriesType: seriesType,
series: {},
hAxis: { slantedText: true }
};
then you can use a variable to further define the series option.
var SecondseriesColumnNumber = 1;
options.series[SecondseriesColumnNumber] = { type: SecondseriesType };
I am struggling to insert a comma into my JustGauge Chart.
So far I have the following code. most of it is working as expected;
window.onload = function() {
var g1 = new JustGage({
id: "g1",
value: 24692,
min: 0,
max: 30009,
title: 'Document Countdown',
titlePosition: 'above',
width: 800,
height: 800,
pointer: true,
textRenderer: function(val) {
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
gaugeWidthScale: 1.2,
noGradient: true,
customSectors: [{
color: '#32CD32',
lo: 0,
hi: 30009
}]
});
}
Fiddle https://jsfiddle.net/johnny_s/xsgpp4ng/1/
The 'textRenderer' part of the above code adds a comma to the 'value', I'm not sure how to do the same with 'max'.
I need to add a comma to the 'max' value - so it's '30,009'. When I try to add it manually the chart won't load.
Any help is appreciated.
This has been a feature request posted as request 193 and has been implemented as an extra property maxTxt in the update of February 3, 2016 and is part of release 1.2.7. Current version is 1.2.9.
Note that several features changed in version 1.2.9 compared to the version you used (1.2.2):
the structure of the customSectors: it is no longer an array. The array part is now moved into a subproperty ranges
Support for title has been removed, as this really does not belong to the "core business" of the widget; one can better control the position and style of such a title in the surrounding HTML/CSS.
There is a bug related to the noGradient setting: issue 270. The suggested fix has not been included in the latest release. Instead of tampering with the library yourself, I would suggest working around that issue by adding a customSectors.length property with a positive value.
I have included these changes also in the updated fiddle which uses version 1.2.9:
var g1 = new JustGage({
id: "g1",
value: 24692,
min: 0,
max: 30009,
maxTxt: "30,009", // <------ add this
// remove title attributes -- no longer supported
//title: 'Document Countdown',
//titlePosition: 'above',
width: 800,
height: 400, // <--- reduced to allow title to be closer to gauge
pointer: true,
textRenderer: function(val) {
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
},
gaugeWidthScale: 1.2,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
noGradient: true,
customSectors: { // <--- no longer an array...
ranges: [{ // <--- ... which has moved to this property
color: '#32CD32',
lo : 0,
hi : 30009
}],
length: 1 // fixes a bug
}
});
The HTML should contain the title. Something like this:
<div style="display: inline-block">
<h2 style="text-align:center;">Document Countdown</h2>
<div id="g1"></div>
</div>
Another way of doing it is add formatNumber: true when you initialize. It will format min max and value. You can also get rid of the textRenderer field.
I updated your fiddle
window.onload = function(){
var g1 = new JustGage({
id: "g1",
value: 24692, /* <-- just change this to your current value */
min: 0,
max: 30009, /* start amount */
title: 'Document Countdown',
titlePosition: 'above',
width: 800,
height: 800,
pointer: true,
formatNumber: true,
gaugeWidthScale: 1.2,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
noGradient: true,
customSectors: [{
color: '#32CD32',
lo: 0,
hi: 30009
}]
});
}
How can I dynamically set google chart series type based on a array of objects?
Example:
Basic chart options
var options = {
title: "Custom Chart",
pointSize: 5,
backgroundColor: { fill: 'white' },
chartArea: { top: 40 },
width: 600,
height: 330,
};
My array that holds series type info is like this:
var sTypes = ["line", "bars", "line"];
The chart series type format is done like this:
series: {1: {type: "line"}}
How can I transform, dynamically, my array into something like that? ... then somehow append those extra options to the basic options?
Never mind, I've found the answer:
var customSeries = {};
for (i = 0; i < sTypes.length; i++) {
customSeries[i] = { type: sTypes[i] };
}
Then I can set:
var options = {..., series: customSeries };
I wish to add an object model to a Google chart dynamically at runtime. I call a php function using AJAX to get the data and based on the number of columns, I wish to make the last column a line chart.
I wish to replace 5 by c as per below script.
c = data.getNumberOfColumns()-2
var options = {
width: 400,
height: 240,
seriesType: "bars",
series: {5: {type: "line"}},
};
c = data.getNumberOfColumns()-2;
var options = {
width: 400,
height: 240,
seriesType: "bars",
series: {}
};
options.series[c] = {type: "line"};
I'm implementing jQuery Sparklines plugin for a web app I'm developing. I want to add tags to the pie chart values so when you hover over that specific chart you will se "Automotive (25%)" instead of the default int value "1 (25%)".
Any ideas on how this could be done?
Here is the code I have:
$(function(){
var myvalues = [10,8,5,7,4,4,1];
$('#sparkline').sparkline(myvalues, {
type: 'pie',
width: '200px',
height: '200px',
sliceColors: ['#5d3092', '#4dc9ec', '#9de49d', '#9074b1', '#66aa00', '#dd4477', '#0099c6', '#990099'],
borderWidth: 7,
borderColor: '#f5f5f5'
});
});
Thanks!
A better alternative to using tooltipPrefix or writing your own formatter is to use tooltipFormat and tooltipValueLookups instead to map the index in your array of values to a name:
$(function() {
var myvalues = [10,8,5,7,4,4,1];
$('#sparkline').sparkline(myvalues, {
type: 'pie',
width: '200px',
height: '200px',
sliceColors: ['#5d3092', '#4dc9ec', '#9de49d', '#9074b1', '#66aa00', '#dd4477', '#0099c6', '#990099'],
borderWidth: 7,
borderColor: '#f5f5f5',
tooltipFormat: '<span style="color: {{color}}">●</span> {{offset:names}} ({{percent.1}}%)',
tooltipValueLookups: {
names: {
0: 'Automotive',
1: 'Locomotive',
2: 'Unmotivated',
3: 'Three',
4: 'Four',
5: 'Five'
// Add more here
}
}
});
});
Here's a link to the Sparkline docs for the above methods: http://omnipotent.net/jquery.sparkline/#tooltips
I also use bootstrap, I ran into this issue where I couldn't see the tooltip:
Globally setting box-sizing to border-box causes tooltip to be displayed incorrectly. This can be fixed by the following css after bootstrap. This may become an issue as box-sizing is more frequently used.
.jqstooltip { box-sizing: content-box;}
Here's the link.
https://github.com/gwatts/jquery.sparkline/issues/89
Here is a working example of a pie charts with custom labels
http://jsfiddle.net/gwatts/ak4JW/
// jsfiddle configured to load jQuery Sparkline 2.1
// http://omnipotent.net/jquery.sparkline/
// Values to render
var values = [1, 2, 3];
// Draw a sparkline for the #sparkline element
$('#sparkline').sparkline(values, {
type: "pie",
// Map the offset in the list of values to a name to use in the tooltip
tooltipFormat: '{{offset:offset}} ({{percent.1}}%)',
tooltipValueLookups: {
'offset': {
0: 'First',
1: 'Second',
2: 'Third'
}
},
});