Formatting a Json for Highchart - javascript

How can we format the below json format to convert into the required format to use in Highchart. Need to convert the heirarchical json to flat json having proper filter values(categories). Series value is to be use to show the sub-bar graphs inside the main bar(Catgories)
Please refer the below link which i am trying to get from the below json.
https://www.highcharts.com/demo/column-basic
Json to Convert(Available):
{
"SalesValue": {
"barValue":[{
"type" :"Maruti",
"Drills": [
{"region":"Asia", "value":4},
{"region":"Australia", "value":87},
{"region":"America", "value":12}
]
},{
"type" :"Hyundai",
"Drills": [
{"region":"Asia", "value":33},
{"region":"Australia", "value":5}
]
},{
"type" :"Toyota",
"Drills": [
{"region":"America", "value":33}
]
}]
}
}
Desired Json(to be made):
{
"Chart Value": {
"Categories":[{
"name" :["Maruti","Hyundai","Toyota"]
}],
"Series":[{
"name":"Asia",
"data":[4,33]
},{
"name":"Australia",
"data":[87, 5]
},{
"name":"America",
"data":[12 , 33]
}]
}
}

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.

Parsing Non Standard JSON in Angular Js

I am getting a JSON response from a Restful service in the following format,
{
"comments":{
"columns":[
"clientId",
"treatmentDate",
"comments",
"photo",
"practitioner"
],
"records":[
[
"1",
"2016-09-12",
"Some Coments",
"0",
"Doc 4"
],
[
"1",
"2016-09-11",
"DDD oNE",
"1",
"Docc 3"
]
]
}
}
Record is starting with table name and separate arrays of columns and records follows. Angular is not accepting data is this format. However if I provide data with standard format as follows, it works perfectly.
[
{
"clientId":"1",
"treatmentDate":"2016-09-12",
"comments":"Some Coments",
"photo":"0",
"practitioner":"Doc 4"
},
{
"clientId":"1",
"treatmentDate":"2016-09-11",
"comments":"DDD oNE",
"photo":"1",
"practitioner":"Docc 3"
}
]
Is there a directive that can do this for me or shall I create a custom function, any ideas?
Is there a reason you cannot just manually reshape the data to conform the form you expect?
var data = json.comments.records.map(function(record) {
return json.comments.columns.reduce(function(reshaped, columnName, idx) {
reshaped[columnName] = record[idx];
return reshaped;
}, {});
});
Be careful with this though; this expects the length of each of the arrays in records to always be the same as the number of column names.

JSON: How do I prepend parameter name to each of its values?

I use the following code to return a JSON string and convert it to a URL.
function runMyReport(){
var json = ko.toJSON(getParams());
var url = "/Report/rvp.aspx?id=" + guestId() + "&" + $.param({ "parameters": json });
}
The problem is that if any parameter has multiple values then it will render as:
{"Product" : "1,2,3"}
and need it to prepend the parameter name to each value and return as:
{"Product" : "1", "Product" : "2", "Product" : "3"}
Can anyone tell me how I can accomplish this?
The reason I need to do this is I created a drop-down field using the below JS array of objects.
var product= [
{ name: "All", id: "1, 2, 3" },
{ name: "key1", id: "1" },
{ name: "key2", id: "2" },
{ name: "key3", id: "3" }
The object "All" has multiple values and when selected displays in the JSON as "Product" : "1,2,3". The problem is that SSRS only accepts multiple values in the following query string format:
querystring.aspx?product=1&product=2&product=3

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.

jqPlot Pie chart not rendering correctly

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.

Categories