CODEWITHSUNDEEP
phpjqueryjson
Adi Dynaweb
Adi Dynaweb

Reputation: 69

convert string to array dynamically in jquery

I have working with amcharts (line charts). Set data dynamically with ajax and get the data from php code in JSON format.

Problem comes string is not changed to array dynamically.

if i have add this string static in jquery code

code:

[{"country":"17 Feb","visits":"4","color":"#EA5759"},{"country":"16 Feb","visits":"1","color":"#EA5759"},{"country":"15 Feb","visits":"3","color":"#EA5759"}];

Thats working fine.

if i have set this code dynamically. line charts shows undefined.

i have use this function

ajax return code

[{"country":"17 Feb","visits":"4","color":"#EA5759"},{"country":"16 Feb","visits":"1","color":"#EA5759"},{"country":"15 Feb","visits":"3","color":"#EA5759"}]

i have just pass this on this function. like

var ajaxString = [{"country":"17 Feb","visits":"4","color":"#EA5759"},{"country":"16 Feb","visits":"1","color":"#EA5759"},{"country":"15 Feb","visits":"3","color":"#EA5759"}];

and call this funciton

lineChart(ajaxString);

function lineChart(data) { var chart;

    var chartData=data;
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "country";
    chart.startDuration = 1;
    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.labelRotation = 45; // this line makes category values to be rotated
    categoryAxis.gridPosition = "start";
    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.dashLength = 5;
    //                                    valueAxis.title = "Visitors from country";
    valueAxis.axisAlpha = 0;
    chart.addValueAxis(valueAxis);
    // GRAPH
    var graph = new AmCharts.AmGraph();
    graph.valueField = "visits";
    graph.colorField = "color";
    graph.balloonText = "<b>[[category]]: [[value]] Users</b>";
    graph.type = "column";
    graph.lineAlpha = 0.2;
    graph.fillAlphas = 0.9;
    chart.addGraph(graph);
    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.cursorAlpha = 0;
    chartCursor.zoomable = false;
    chartCursor.categoryBalloonEnabled = false;
    chart.addChartCursor(chartCursor);
    chart.creditsPosition = "top-right";
    // WRITE
    chart.write("chartdiv");
}[![undefined message][1]][1]

But thats not working. Thank You in advance

Upvotes: 0

Views: 191

Answers (3)

Dhiraj
Dhiraj

Reputation: 98

The ajaxString that you are passing to your function is simply an string and not a json object , so what your function lineChart might be expecting is json object so try to convert your ajaxString into valid json object before sending it to your function using

JSON.parse(ajaxString);

Upvotes: 2

shafeen
shafeen

Reputation: 2457

This looks like you are attempting to set a JSON string to chartdata instead of a javascript object array.

In this case, you should try to parse your string gotten through the ajax call like so : JSON.parse(dataelement) before setting it to chartdata.

Upvotes: 1

Peeje
Peeje

Reputation: 475

You can create the code dynamically in PHP and covert the array in json via json_encode. encoded json can be used later in the jquery.

Upvotes: -1

Related Questions