jqPlot Pie chart not rendering correctly - javascript

I am using jqPlot in phonegap but some problem is there like if I gave static value to pie chart then it works well but if I gave dynamic value then not rendering correctly
Static chart :-
$.jqplot('chartdiv', [ [ [ 'Cricket', 42],
[ 'Football', 8 ],
[ 'Basketball', 4 ], [ 'Chess', 28 ],
[ ' TableTennis', 18 ] ] ], {
seriesDefaults : {
renderer : $.jqplot.PieRenderer,
rendererOptions : {
showDataLabels : true
}
},
legend : {
show : true,
location : 'e'
}
});
O/P :-
Dynamic chart :-
var cricketPortion = document.getElementById("value_1").value;
var footballPortion = document.getElementById("value_2").value;
var basketballPortion = document.getElementById("value_3").value;
var chessPortion = document.getElementById("value_4").value;
var ttPortion = document.getElementById("value_5").value;
$.jqplot('chartdiv', [ [ [ 'Cricket', cricketPortion ],
[ 'Football', footballPortion ],
[ 'Basketball', basketballPortion ], [ 'Chess', chessPortion ],
[ ' TableTennis', ttPortion ] ] ], {
seriesDefaults : {
renderer : $.jqplot.PieRenderer,
rendererOptions : {
showDataLabels : true
}
},
legend : {
show : true,
location : 'e'
}
});
O/P :-
Tell me how can I get rid of this..??

Try with this you will get result
Use parseInt for every value
parseInt(document.getElementById("value_1").value)
DEMO

Use the parseInt function of Javascript to parse the String values into Integers Eg: parseInt(document.getElementById("value_1").value)
jqPlot excepts an value(integer) to plot the sections/divisions on the canvas(be it a pie-chart, bar-chart or any other chart)
So its [ label(a String), value(an Integer) ]
Make sure the data-type of the second field is of Integer type
Hope it helps.

Related

Javascript multiple json data combination

I have json data like this:
{
    variant_57    : {
        variant_id        : 57,
        variant_name    : "Color",
        options                : [
            {option_id:62, option_name:"Blue"},
            {option_id:63, option_name:"White"}
        ]
    },
    variant_71    : {
        variant_id        : 71,
        variant_name    : "Size",
        options                : [
            {option_id:85, option_name:"S"},
            {option_id:86, option_name:"M"},
            {option_id:87, option_name:"L"}
        ]
    },
};
The number of options within a variant might change as well as the number of variants. I keep this short so that there wouldn't be too many unnecessary codes. The result that I wanted based on the example above is this.
[
[
{variant_id:57,variant_name:"Color",option_id:62,option_name:"Blue"},
{variant_id:71,variant_name:"Size",option_id:85,option_name:"S"}
],
[
{variant_id:57,variant_name:"Color",option_id:62,option_name:"Blue"},
{variant_id:71,variant_name:"Size",option_id:86,option_name:"M"}
],
[
{variant_id:57,variant_name:"Color",option_id:62,option_name:"Blue"},
{variant_id:71,variant_name:"Size",option_id:87,option_name:"L"}
],
[
{variant_id:57,variant_name:"Color",option_id:63,option_name:"White"},
{variant_id:71,variant_name:"Size",option_id:85,option_name:"S"}
],
[
{variant_id:57,variant_name:"Color",option_id:63,option_name:"White"},
{variant_id:71,variant_name:"Size",option_id:86,option_name:"M"}
],
[
{variant_id:57,variant_name:"Color",option_id:63,option_name:"White"},
{variant_id:71,variant_name:"Size",option_id:87,option_name:"L"}
]
];
If there was another variant which was named 'type of fabric', the result that I wanted would have been like this.
[
    [
        {variant_id:57,variant_name:"Color",option_id:62,option_name:"Blue"},
        {variant_id:71,variant_name:"Size",option_id:85,option_name:"S"},
        {variant_id:101,variant_name:"Fabric",option_id:105,option_name:"Linen"}
    ],
    [...],
    [...],
   .............
];
Thanks.

Object with Key:Value where every Value is an Array of Objects - cannot iterate [duplicate]

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 3 years ago.
I am downloading data via d3.json when create an object with each record that holds downloaded data. Each object will be stored in an array. I lost the ability to iterate over the array.
I have tried using multi-dimensional array, and still cannot iterate over the created object.
var datamodel = {
"mkt":[],
"confidence":[],
"homes":[],
"combined":[]
}
var tObject={};
// console.log(datamodel)
const url1 = "https://www.quandl.com/api/v3/datasets/YALE/SPCOMP.json?start_date='2015-01-01'&end_date='2018-09-30'&api_key=4QuxetVDNP8R3sYg9CED";
// Fetch the JSON data and console log it
d3.json(url1).then(function(data) {
data.dataset.data.forEach(element => {
tObject['date']=element[0];
tObject['spx'] = element[1];
tObject['rate']=element[5];
datamodel['mkt'].push(tObject); //creating an array of objects
tObject={};
});
});
I repeat the code above for other datasets to fill "confidence, homes"
I need to iterate after downloading over the datamodel, and update the "combined" so that I can have more stats, like change per date, ratios.
For instance: going to debug console in any browser, I can access the datamodel variable via datamodel.mkt
The debug console allows me to iterate over the objects, not sure why code ran in JS file does not allow me to iterate not get length of the array. I am so lost.
I hit the API in browser and copied the data in my js file. I call this function in HTML onload. Half of this function does what your code did to fill data in datamodel.mkt
Then it loops over the data present in datamodel.mkt and copies the elements in datamodel.combined
Please note that the commented forEach loop also works. You can uncomment the console.log to view the datamodel object in console
Hope this helps.
function setData(){
var data = {"dataset":{"id":539984,"dataset_code":"SPCOMP","database_code":"YALE","name":"S\u0026P Composite","description":"This data set consists of monthly stock price, dividends, and earnings data and the consumer price index (to allow conversion to real values), all starting January 1871. Further info at http://www.econ.yale.edu/~shiller/data.htm.","refreshed_at":"2019-08-24T02:51:26.805Z","newest_available_date":"2019-08-31","oldest_available_date":"1871-01-31","column_names":["Year","S\u0026P Composite","Dividend","Earnings","CPI","Long Interest Rate","Real Price","Real Dividend","Real Earnings","Cyclically Adjusted PE Ratio"],"frequency":"monthly","type":"Time Series","premium":false,"limit":null,"transform":null,"column_index":null,"start_date":"2015-01-01","end_date":"2018-09-30","data":[["2018-09-30",2901.5,52.34,130.39,252.439,3.0,2944.5129194578,53.115907704436,132.32295004932,32.6228911205],["2018-08-31",2857.82,51.89,127.75333333333,252.146,2.89,2903.555479266,52.720428095231,129.79784975768,32.390276880301],["2018-07-31",2793.64,51.44,125.11666666667,252.006,2.89,2839.9251892812,52.29226089855,127.18960684468,31.886366962159],["2018-06-30",2754.35,50.99,122.48,251.989,2.91,2800.1731263567,51.838302217557,124.51765553258,31.630556496455],["2018-05-31",2701.49,50.66,120.13333333333,251.588,2.976,2750.8111875864,51.58490120753,122.32661136461,31.243615074865],["2018-04-30",2653.63,50.33,117.78666666667,250.546,2.87,2713.3151215246,51.462016206605,120.43590997262,30.970179293325],["2018-03-31",2702.77,50.0,115.44,249.554,2.84,2774.5457779178,51.327818828791,118.50566811191,31.808409057643],["2018-02-28",2705.16,49.643333333333,113.58666666667,248.991,2.86,2783.2783925925,51.076911163456,116.86677128892,32.03538233925],["2018-01-31",2789.8,49.286666666667,111.73333333333,247.867,2.58,2883.3787928607,50.939898715844,115.48122581868,33.307343828031],["2017-12-31",2664.34,48.93,109.88,246.524,2.4,2768.7119778399,50.846767708215,114.18440293846,32.086132007706],["2017-11-30",2593.61,48.676666666667,108.94666666667,246.669,2.35,2693.6268919585,50.553775758202,113.14795637068,31.29891333388],["2017-10-31",2557.0,48.423333333333,108.01333333333,246.663,2.36,2655.6697042118,50.291896484272,112.18135979048,30.920393290334],["2017-09-30",2492.84,48.17,107.08,246.819,2.2,2587.3975149806,49.997167205523,111.14172024844,30.168114410679],["2017-08-31",2456.22,47.853333333333,106.06,245.519,2.21,2562.8872302144,49.931478826486,110.66590925753,29.914959397497],["2017-07-31",2454.1,47.536666666667,105.04,244.786,2.32,2568.3429837695,49.749588160679,109.92981011986,30.002220744019],["2017-06-30",2433.99,47.22,104.02,244.955,2.19,2545.5393875916,49.384085342206,108.78722061195,29.748503240633],["2017-05-31",2395.35,46.94,102.77666666667,244.733,2.3,2507.4009520069,49.135784201558,107.58440805899,29.313344980271],["2017-04-30",2359.31,46.66,101.53333333333,244.524,2.3,2471.7859389569,48.884433123129,106.37375574586,28.904245956275],["2017-03-31",2366.82,46.38,100.29,243.801,2.48,2487.0074615157,48.735183100151,105.3827406881,29.086921742465],["2017-02-28",2329.91,46.153333333333,98.376666666667,243.603,2.42,2450.2130769633,48.536424530897,103.4562687549,28.655106525184],["2017-01-31",2275.12,45.926666666667,96.463333333333,242.839,2.43,2400.1214199531,48.45000545629,101.76329713308,28.063573742124],["2016-12-31",2246.63,45.7,94.55,241.432,2.49,2383.8782004353,48.49184501226,100.32612573105,27.865098223924],["2016-11-30",2164.99,45.476666666667,92.73,241.353,2.14,2298.0026949634,48.27066293976,98.427147425141,26.850953531056],["2016-10-31",2143.02,45.253333333333,90.91,241.729,1.76,2271.1447214649,47.958894050776,96.34523552201,26.525143085071],["2016-09-30",2157.69,45.03,89.09,241.428,1.63,2289.5427262476,47.781705881256,94.534136730205,26.727873346479],["2016-08-31",2170.95,44.84,88.366666666667,240.849,1.56,2309.1508982288,47.694477660277,93.992016263302,26.948872433724],["2016-07-31",2148.9,44.65,87.643333333333,240.628,1.5,2287.7964664337,47.53600084986,93.308254598384,26.694003256096],["2016-06-30",2083.89,44.46,86.92,241.018,1.64,2214.9945027446,47.257127579683,92.388428457626,25.840372927671],["2016-05-31",2065.55,44.266666666667,86.76,240.229,1.81,2202.7115000166,47.206165783482,92.521241190697,25.69470992345],["2016-04-30",2075.54,44.073333333333,86.6,239.261,1.81,2222.3196911532,47.190146430049,92.72424778798,25.922337543674],["2016-03-31",2021.95,43.88,86.44,238.132,1.89,2175.2039979402,47.20589106042,92.991732526498,25.372298620188],["2016-02-29",1904.42,43.716666666667,86.47,237.111,1.78,2057.5877800903,47.232689805618,93.42456776573,24.00260677729],["2016-01-31",1918.6,43.553333333333,86.5,236.916,2.09,2074.6144044725,47.094950847558,93.533902838981,24.206167203878],["2015-12-31",2054.08,43.39,86.53,236.525,2.24,2224.7829278089,46.995896575415,93.721017070077,25.965424037124],["2015-11-30",2080.62,43.096666666667,87.906666666667,237.336,2.26,2245.8279922768,46.518682111016,94.886741792227,26.225851890972],["2015-10-31",2024.81,42.803333333333,89.283333333333,237.838,2.07,2180.9734222979,46.104539381848,96.169308258142,25.491441046067],["2015-09-30",1944.41,42.51,90.66,237.945,2.17,2093.4307689277,45.767992340667,97.608237723003,24.496752170486],["2015-08-31",2039.87,42.253333333333,92.076666666667,238.316,2.17,2192.7879220761,45.420835151647,98.979151892865,25.693658417058],["2015-07-31",2094.14,41.996666666667,93.493333333333,238.654,2.32,2247.9380311036,45.080989895413,100.35967970367,26.3811363364],["2015-06-30",2099.29,41.74,94.91,238.638,2.36,2253.6173464096,44.808477170442,101.88722013049,26.495895292785],["2015-05-31",2111.94,41.43,96.356666666667,237.805,2.2,2275.1389967621,44.631480362061,103.80257485124,26.806111379651],["2015-04-30",2094.86,41.12,97.803333333333,236.599,1.94,2268.2422722624,44.523320047845,105.89808151133,26.791371680192],["2015-03-31",2079.99,40.81,99.25,236.119,2.04,2256.7198666245,44.277490640313,107.68294403458,26.728605452928],["2015-02-28",2082.2,40.353333333333,100.27,234.722,1.98,2272.5632823084,44.042600927906,109.43709553216,26.995513699383],["2015-01-31",2028.18,39.896666666667,101.29,233.707,1.88,2223.2183358864,43.733298264494,111.03047325283,26.492295420383]],"collapse":null,"order":null,"database_id":175}}
var datamodel = {
"mkt":[],
"confidence":[],
"homes":[],
"combined":[]
}
var tObject={};
data.dataset.data.forEach(element => {
tObject['date']=element[0];
tObject['spx'] = element[1];
tObject['rate']=element[5];
datamodel['mkt'].push(tObject); //creating an array of objects
tObject={};
});
/*
datamodel.mkt.forEach(element => {
datamodel["combined"].push(element);
});*/
for(var i=0;i<datamodel.mkt.length; i++)
{
datamodel.combined[i] = datamodel.mkt[i];
}
document.getElementById("foo").innerHTML = "Length of datamodel.mkt = " + datamodel.mkt.length + "<br> Length of datamodel.combined = " + datamodel.combined.length;
//console.log(datamodel);
}
<html>
<head></head>
<body onload="setData()">
<div id="foo"></div>
</body>
</html>
You can use map() or forEach() to get your work done. In "forEach(), you are pushing the objects, but the array is getting updated only by the last object. You can do something like this:
let data ={
"dataset": {
"id": 539984,
"dataset_code": "SPCOMP",
"database_code": "YALE",
"name": "S&P Composite",
"description": "This data set consists of monthly stock price, dividends, and earnings data and the consumer price index (to allow conversion to real values), all starting January 1871. Further info at http://www.econ.yale.edu/~shiller/data.htm.",
"refreshed_at": "2019-08-24T02:51:26.805Z",
"newest_available_date": "2019-08-31",
"oldest_available_date": "1871-01-31",
"column_names": [
"Year",
"S&P Composite",
"Dividend",
"Earnings",
"CPI",
"Long Interest Rate",
"Real Price",
"Real Dividend",
"Real Earnings",
"Cyclically Adjusted PE Ratio"
],
"frequency": "monthly",
"type": "Time Series",
"premium": false,
"limit": null,
"transform": null,
"column_index": null,
"start_date": "2015-01-01",
"end_date": "2018-09-30",
"data": [
[
"2018-09-30",
2901.5,
52.34,
130.39,
252.439,
3.0,
2944.5129194578,
53.115907704436,
132.32295004932,
32.6228911205
],
[
"2018-08-31",
2857.82,
51.89,
127.75333333333,
252.146,
2.89,
2903.555479266,
52.720428095231,
129.79784975768,
32.390276880301
],
[
"2018-07-31",
2793.64,
51.44,
125.11666666667,
252.006,
2.89,
2839.9251892812,
52.29226089855,
127.18960684468,
31.886366962159
],
[
"2018-06-30",
2754.35,
50.99,
122.48,
251.989,
2.91,
2800.1731263567,
51.838302217557,
124.51765553258,
31.630556496455
],
[
"2018-05-31",
2701.49,
50.66,
120.13333333333,
251.588,
2.976,
2750.8111875864,
51.58490120753,
122.32661136461,
31.243615074865
],
[
"2018-04-30",
2653.63,
50.33,
117.78666666667,
250.546,
2.87,
2713.3151215246,
51.462016206605,
120.43590997262,
30.970179293325
],
[
"2018-03-31",
2702.77,
50.0,
115.44,
249.554,
2.84,
2774.5457779178,
51.327818828791,
118.50566811191,
31.808409057643
],
[
"2018-02-28",
2705.16,
49.643333333333,
113.58666666667,
248.991,
2.86,
2783.2783925925,
51.076911163456,
116.86677128892,
32.03538233925
],
[
"2018-01-31",
2789.8,
49.286666666667,
111.73333333333,
247.867,
2.58,
2883.3787928607,
50.939898715844,
115.48122581868,
33.307343828031
],
[
"2017-12-31",
2664.34,
48.93,
109.88,
246.524,
2.4,
2768.7119778399,
50.846767708215,
114.18440293846,
32.086132007706
],
[
"2017-11-30",
2593.61,
48.676666666667,
108.94666666667,
246.669,
2.35,
2693.6268919585,
50.553775758202,
113.14795637068,
31.29891333388
],
[
"2017-10-31",
2557.0,
48.423333333333,
108.01333333333,
246.663,
2.36,
2655.6697042118,
50.291896484272,
112.18135979048,
30.920393290334
],
[
"2017-09-30",
2492.84,
48.17,
107.08,
246.819,
2.2,
2587.3975149806,
49.997167205523,
111.14172024844,
30.168114410679
],
[
"2017-08-31",
2456.22,
47.853333333333,
106.06,
245.519,
2.21,
2562.8872302144,
49.931478826486,
110.66590925753,
29.914959397497
],
[
"2017-07-31",
2454.1,
47.536666666667,
105.04,
244.786,
2.32,
2568.3429837695,
49.749588160679,
109.92981011986,
30.002220744019
],
[
"2017-06-30",
2433.99,
47.22,
104.02,
244.955,
2.19,
2545.5393875916,
49.384085342206,
108.78722061195,
29.748503240633
],
[
"2017-05-31",
2395.35,
46.94,
102.77666666667,
244.733,
2.3,
2507.4009520069,
49.135784201558,
107.58440805899,
29.313344980271
],
[
"2017-04-30",
2359.31,
46.66,
101.53333333333,
244.524,
2.3,
2471.7859389569,
48.884433123129,
106.37375574586,
28.904245956275
],
[
"2017-03-31",
2366.82,
46.38,
100.29,
243.801,
2.48,
2487.0074615157,
48.735183100151,
105.3827406881,
29.086921742465
],
[
"2017-02-28",
2329.91,
46.153333333333,
98.376666666667,
243.603,
2.42,
2450.2130769633,
48.536424530897,
103.4562687549,
28.655106525184
],
[
"2017-01-31",
2275.12,
45.926666666667,
96.463333333333,
242.839,
2.43,
2400.1214199531,
48.45000545629,
101.76329713308,
28.063573742124
],
[
"2016-12-31",
2246.63,
45.7,
94.55,
241.432,
2.49,
2383.8782004353,
48.49184501226,
100.32612573105,
27.865098223924
],
[
"2016-11-30",
2164.99,
45.476666666667,
92.73,
241.353,
2.14,
2298.0026949634,
48.27066293976,
98.427147425141,
26.850953531056
],
[
"2016-10-31",
2143.02,
45.253333333333,
90.91,
241.729,
1.76,
2271.1447214649,
47.958894050776,
96.34523552201,
26.525143085071
],
[
"2016-09-30",
2157.69,
45.03,
89.09,
241.428,
1.63,
2289.5427262476,
47.781705881256,
94.534136730205,
26.727873346479
],
[
"2016-08-31",
2170.95,
44.84,
88.366666666667,
240.849,
1.56,
2309.1508982288,
47.694477660277,
93.992016263302,
26.948872433724
],
[
"2016-07-31",
2148.9,
44.65,
87.643333333333,
240.628,
1.5,
2287.7964664337,
47.53600084986,
93.308254598384,
26.694003256096
],
[
"2016-06-30",
2083.89,
44.46,
86.92,
241.018,
1.64,
2214.9945027446,
47.257127579683,
92.388428457626,
25.840372927671
],
[
"2016-05-31",
2065.55,
44.266666666667,
86.76,
240.229,
1.81,
2202.7115000166,
47.206165783482,
92.521241190697,
25.69470992345
],
[
"2016-04-30",
2075.54,
44.073333333333,
86.6,
239.261,
1.81,
2222.3196911532,
47.190146430049,
92.72424778798,
25.922337543674
],
[
"2016-03-31",
2021.95,
43.88,
86.44,
238.132,
1.89,
2175.2039979402,
47.20589106042,
92.991732526498,
25.372298620188
],
[
"2016-02-29",
1904.42,
43.716666666667,
86.47,
237.111,
1.78,
2057.5877800903,
47.232689805618,
93.42456776573,
24.00260677729
],
[
"2016-01-31",
1918.6,
43.553333333333,
86.5,
236.916,
2.09,
2074.6144044725,
47.094950847558,
93.533902838981,
24.206167203878
],
[
"2015-12-31",
2054.08,
43.39,
86.53,
236.525,
2.24,
2224.7829278089,
46.995896575415,
93.721017070077,
25.965424037124
],
[
"2015-11-30",
2080.62,
43.096666666667,
87.906666666667,
237.336,
2.26,
2245.8279922768,
46.518682111016,
94.886741792227,
26.225851890972
],
[
"2015-10-31",
2024.81,
42.803333333333,
89.283333333333,
237.838,
2.07,
2180.9734222979,
46.104539381848,
96.169308258142,
25.491441046067
],
[
"2015-09-30",
1944.41,
42.51,
90.66,
237.945,
2.17,
2093.4307689277,
45.767992340667,
97.608237723003,
24.496752170486
],
[
"2015-08-31",
2039.87,
42.253333333333,
92.076666666667,
238.316,
2.17,
2192.7879220761,
45.420835151647,
98.979151892865,
25.693658417058
],
[
"2015-07-31",
2094.14,
41.996666666667,
93.493333333333,
238.654,
2.32,
2247.9380311036,
45.080989895413,
100.35967970367,
26.3811363364
],
[
"2015-06-30",
2099.29,
41.74,
94.91,
238.638,
2.36,
2253.6173464096,
44.808477170442,
101.88722013049,
26.495895292785
],
[
"2015-05-31",
2111.94,
41.43,
96.356666666667,
237.805,
2.2,
2275.1389967621,
44.631480362061,
103.80257485124,
26.806111379651
],
[
"2015-04-30",
2094.86,
41.12,
97.803333333333,
236.599,
1.94,
2268.2422722624,
44.523320047845,
105.89808151133,
26.791371680192
],
[
"2015-03-31",
2079.99,
40.81,
99.25,
236.119,
2.04,
2256.7198666245,
44.277490640313,
107.68294403458,
26.728605452928
],
[
"2015-02-28",
2082.2,
40.353333333333,
100.27,
234.722,
1.98,
2272.5632823084,
44.042600927906,
109.43709553216,
26.995513699383
],
[
"2015-01-31",
2028.18,
39.896666666667,
101.29,
233.707,
1.88,
2223.2183358864,
43.733298264494,
111.03047325283,
26.492295420383
]
],
"collapse": null,
"order": null,
"database_id": 175
}
}
var datamodel = {
"mkt":[],
"confidence":[],
"homes":[],
"combined":[]
}
var tObject={};
(data['dataset']['data']).map((mkt, index) => {
tObject['date'] = mkt[0];
tObject['spx'] = mkt[1];
tObject['rate'] = mkt[5];
datamodel['mkt'].push(JSON.parse(JSON.stringify(tObject)))
})
console.log(datamodel['mkt'].length)
data is the JSON data which I got after hitting your API. I hope it helps.

Display datetime including milliseconds

Is it possible to display in highcharts x axis with a datetime including the milliseconds? i have a different data recorded on the same time and seconds but different milliseconds. Here's my sample data.
[
[
"1507104333940",
209.231
],
[
"1507104333950",
208.715
],
[
"1507104333960",
207.933
],
[
"1507104333970",
207.112
],
[
"1507104333980",
206.634
],
[
"1507104333990",
206.638
],
[
"1507104334000",
206.132
],
[
"1507104334010",
205.197
],
[
"1507104334020",
204.713
],
[
"1507104334030",
204.415
]]
But in highcharts it only display date and time (HH:MM:SS). I want to display it with milliseconds (HH:MM:SS.Mi)
You can use xAxis.dateTimeLabelFormats. Specify the timeformat to be millisecond: '%H:%M:%S.%L'
var data = [ [ "1507104333940", 209.231 ], [ "1507104333950", 208.715 ], [ "1507104333960", 207.933 ], [ "1507104333970", 207.112 ], [ "1507104333980", 206.634 ], [ "1507104333990", 206.638 ], [ "1507104334000", 206.132 ], [ "1507104334010", 205.197 ], [ "1507104334020",204.713 ], [ "1507104334030", 204.415 ]].map(a => [+a[0], a[1]]);;
Highcharts.chart('chart', {
title: {
text: 'Chart with time'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L'
}
},
series: [{
data: data
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart"></div>

VizFrame combined chart with multiple Y-Axis

I have a problem with the VizFrame control of the SAPUI5 Framework. I want to display some data in an complex chart with two Y-axes. My data model looks like this:
{
"d" : {
"results" : [
{
"DataA" : "2",
"DataB" : "4",
"Id" : "1",
},
{
"DataA" : "3",
"DataB" : "2",
"Id" : "2",
}
]
}
}
I tried to display DataA on the left Y-Axis and DataB on the right one, while using the Id for the X-Axis. This works without problems with the VizFrame types: dual_line and dual_column.
I havent found a way to display the data as a bar (DataA on Y1) and line (DataB on Y2). My current coding looks like this:
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("data.json");
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{
axis : 2,
name : oLocText.getText('Id'),
value : "{Id}"
}],
measures : [{
group : 1,
name : DataA,
value : '{DataA}'
},{
group : 2,
name: DataB,
value: '{DataB}'
}],
data : {
path : "/d/results"
}
});
oVizFrame.setDataset(oDataset);
oVizFrame.setModel(oModel);
oVizFrame.setVizType('combination');
oVizFrame.setVizProperties({
title: {
visible: true,
text: "Combined"
},
plotArea: {
colorPalette : d3.scale.category20().range(),
}});
var feedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "primaryValues",
'type': "Measure",
'values': [ DataA , DataB]
}),
feedCategoryAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "axisLabels",
'type': "Dimension",
'values': [ Id]
});
oVizFrame.addFeed(feedValueAxis);
oVizFrame.addFeed(feedCategoryAxis);
Thank you very much for your help!
Please try:
var feedValueAxis1 = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis",
'type': "Measure",
'values': [ DataA ]
}), feedValueAxis2 = new sap.viz.ui5.controls.common.feeds.FeedItem({
'uid': "valueAxis2",
'type': "Measure",
'values': [DataB]
}),
it will automatically plot DataA against left axis as bar and DataB against right axis as line.
Please be noticed that dual combination was available starting from SAPUI5 1.40.
I don´t know if your question is still relevant.
If I got your question right it´s about displaying measures as bar / line. I had a similar problem and I solved it by setting the dataShape property of plotArea:
oVizFrame.setVizProperties({
plotArea: { dataShape : {primaryAxis : ['bar','bar','bar'],
secondaryAxis : ['line', 'line', 'line']}}
});
In this example a maximum of 3 measures on each axis would be drawn as bar on axis 1 and as line on axis 2. I guess once you see this coding you know what to do when you would like to change bar vs. line.
One remark: only 'bar' and 'line' are allowed here (I checked the docu and also source code).
Best regards,
Sebastian

how to convert json data into a list of values (for linechart)

i have json data in following format.
{
"2" : {
"question" : "How did you like our Food?",
"avg_rating" : {
"2016-05-23" : 3.7142857142857,
"2016-05-25" : 4.5
}
},
"3" : {
"question" : "How did you like our drinks?",
"avg_rating" : {
"2016-05-23" : 3.4285714285714,
"2016-05-25" : 4
}
}
}
i want it to be formatted in following format where above data should be inside data variable of plot object.
var plot = [{
label: "",
data: [
[2016-05-23, 3.7142857142857],[2016-05-25, 4.5]
],
points: {fillColor: '#006699'}
},{
label: "",
data: [
[2016-05-23, 3.4285714285714],[2016-05-25, 4]
],
points: {fillColor: '#009933'}
}];
i am not good in english so i may not have been able to explain this problem properly. please help me to sort out this problem.

Categories