We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How to pass values from ajax to chart

Thread ID:

Created:

Updated:

Platform:

Replies:

126110 Sep 23,2016 05:20 PM Oct 3,2016 05:37 AM JavaScript 3
loading
Tags: ejChart
Roimer Machacón Otero
Asked On September 23, 2016 05:20 PM

Hi, we're using this code based in a example in the demo: 

http://js.syncfusion.com/demos/web/#!/azure/chart/line

And have this code:

function indicadorGrafico1() {   
    var valores1 = [
                {
                    points: [{ x: "Ene", y: 100 }, { x: "Feb", y: 90 }, { x: "Mar", y: 80 }, { x: "Abr", y: 70 },
                             { x: "May", y: 60 }, { x: "Jun", y: 50 }, { x: "Jul", y: 40 }, { x: "Ago", y: 30 },
                { x: "Sep", y: 20 }, { x: "Oct", y: 10 }, { x: "Nov", y: 0 }, { x: "Dic", y: 0 }],
                    name: 'Presupuestado',
                    border: { color: 'transparent' },
                    opacity: 0.5,
                },
   {
       points: [{ x: "Ene", y: 100 }, { x: "Feb", y: 85 }, { x: "Mar", y: 75 }, { x: "Abr", y: 45 },
                             { x: "May", y: 40 }, { x: "Jun", y: 30 }, { x: "Jul", y: 26 }, { x: "Ago", y: 23 },
                { x: "Sep", y: 20 }, { x: "Oct", y: 15 }, { x: "Nov", y: 5 }, { x: "Dic", y: 0 }],
       name: 'Ejecutado',
       border: { color: 'transparent' },
       opacity: 0.5,
   },
    ];
    console.log(valores1);
    if (valores1 != "") {
        document.getElementById("divMensaje1").style.display = 'none';
        $("#ch1").ejChart(
            {
                //Initializing Primary X Axis
                primaryXAxis:
                {
                    //range: { min: 2005, max: 2011, interval: 1 },
                    title: { text: 'Mes' },
                    valueType: 'category',
                    axisLine: { visible: false },
                    majorGridLines: { visible: false },
                    majorTickLines: { visible: false },
                },

                //Initializing Primary Y Axis
                primaryYAxis:
                {
                    labelFormat: "${value}",
                    title: { text: 'Millones' },
                    range: { min: 0 },
                    axisLine: { visible: false },
                    majorTickLines: { visible: false },
                },

                //Initializing Common Properties for all the series
                commonSeriesOptions:
                {
                    type: 'splinearea', enableAnimation: true,
                    tooltip:
                    {
                        visible: true,
                        format: "#point.x# : #point.y#",
                        fill: "rgba(114,188,73,99)",
                        border: { color: "white", width: 1 },
                        font: { color: "white" }
                    },
                    marker:
                    {
                        shape: 'circle',
                        size:
                        {
                            height: 10, width: 10
                        },
                        visible: true
                    },
                    border: { width: 2 }
                },

                //Initializing Series
                series: valores1,
                isResponsive: true,
                load: "loadTheme",
                title: { text: 'Ejecución Presupuestado vs Real' },
                size: { height: "600" },
                legend: { visible: true },
                visible: true
            });
    } else {
        $("#divMensaje1").show("slow");
    }
}


Now our question is we need pass the value of the variable valores1 from ajax method, exist a way to do this. 

The value that have return the ajax method is arraylist? list of...?


Dharanidharan Dharmasivam [Syncfusion]
Replied On September 26, 2016 01:24 AM

Hi Roimer, 
 
Thanks for using Syncfusion product. 
We have analyzed your query. We have prepared a sample based on your requirement. In the sample we have used XMLHttpRequest object to retrieve the data, retrieved data will in string format. We have then convert into array of objects and passed the data source to the series. Kindly find the code snippet, 
 
Code Snippet: 
JS: 
 
function indicadorGrafico1() { 
   var xhttp = new XMLHttpRequest(); 
   xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
      var chart = $("#container").ejChart("instance"); 
         var data = this.responseText; 
         data = eval("" + data + ""); 
         chart.model.series =[]; 
         for(var i=0;i<data.length;i++){ 
         chart.model.series.push(data[i]); 
         } 
         chart.redraw(); 
    } 
  }; 
  xhttp.open("GET", "data.json", true); 
  xhttp.send(); 
} 
 
 
Screenshot: 
 
 
For your reference we have attached the sample. Kindly find the sample from the below location, 
 
Thanks, 
Dharani. 


Roimer Machacón Otero
Replied On September 30, 2016 12:23 PM

Hi, we're using a form based in the example and work correctly! :)

Dharanidharan Dharmasivam [Syncfusion]
Replied On October 3, 2016 05:37 AM

Hi Roimer, 

Thanks for your update. Kindly revert us, if you require any further assistance. 

Thanks, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;