Home forums Using CanvasJS Need a Assistance to fetch and connect Bubble chart to mysql via PHP

This topic contains 3 replies, has 2 voices, and was last updated by  Vishwas R 1 week, 2 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #25845

    <html>
    <head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
    <meta http-equiv=”x-ua-compatible” content=”ie=edge”>
    <title></title>

    <!– Styles –>
    <link rel=”stylesheet” type=”text/css” href=”assets/bootstrap/bootstrap4-alpha3.min.css”/>
    <link rel=”stylesheet” type=”text/css” href=”assets/no-ui-slider/nouislider.min.css”/>
    <link rel=”stylesheet” type=”text/css” href=”assets/economy-dashboard/styles.css”/>
    <link rel=”stylesheet” type=”text/css” href=”assets/font-awesome/css/font-awesome.min.css”/>

    <!– Scripts –>
    <script type=”text/javascript” src=”assets/jquery/jquery-3.1.0.min.js”></script>
    <script type=”text/javascript” src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    <script type=”text/javascript” src=”assets/tether/tether.min.js”></script>
    <script type=”text/javascript” src=”assets/bootstrap/bootstrap4-alpha3.min.js”></script>
    <script type=”text/javascript” src=”assets/economy-dashboard/economy-dashboard-data.js”></script>
    <script type=”text/javascript” src=”assets/no-ui-slider/nouislider.min.js”></script>
    <script type=”text/javascript” src=”assets/economy-dashboard/economy-dashboard.js”></script>
    </head>
    <body>

    <div class=”row”>
    <hr>
    </div>

    <div class=”row”>
    <h4 class=”chart-title”></h4>
    <div class=”col-md-1 hidden-md-down life-expec-chart-info”>
    <p class=”chart-info-description”>
    <sup><i class=”fa fa-quote-left quotes-size” aria-hidden=”true”></i></sup>

    </p>
    </div>
    <div class=”col-lg-11 col-xs-12″>
    <div id=”GDP-per-capita-bubble-chart”></div>
    </div>
    <div class=”col-lg-1 hidden-md-down”></div>
    <div class=”col-lg-11 col-xs-12 pull-right” style=”margin:20px 0 50px 0;”>
    <div class=”col-xs-1″>
    <i class=”fa fa-play play-btn” aria-hidden=”true” id=”startGraphAnimation”></i>
    <i class=”fa fa-pause pause-btn” aria-hidden=”true” id=”pauseGraphAnimation” style=”display: none;”></i>
    </div>
    <div class=”col-xs-10 col-sm-11 slider”>
    <div id=”year-slider”></div>
    </div>
    </div>
    </div>

    <div class=”row”>
    <hr>
    </div>
    </body>
    </html>

    //////////////////////economy dashboard.js//////////////////////////

    $(function() {
    var yearCounter = 0;
    var countryColor = {“Argentina” : “#6dbceb”, “Brazil” : “#c8b631”, “Canada” : “#369ead”, “China” : “#a2d1cf”, “Germany” : “#f79647”, “India” : “#7f6084”, “Japan” : “#4f81bc”,
    “Malawi” : “#369ead”, “Nigeria” : “#86b402”, “South Korea” : “#52514e”, “United Kingdom” : “#a064a1”, “United States” : “#c24642”, “Zimbabwe” : “#c24642”};
    var countryCode = {“India”:”IN”,”China”:”CN”,”United States”:”US”};
    var yearSlider = document.getElementById(‘year-slider’);
    var orderedDataPoints = JSON.parse(JSON.stringify(getDataPoint(yearArr[0])));
    var GDPPerCapitaBubbleChart;
    var merchandiseImportsExportsColumnChart;

    //On click of the play button the bubble chart animation starts. Following callback function performs 6 transition between the actual dataPoints of the year(example from 1961 to 1962) to produce the animation effect
    var animationIteration = 0;
    var pauseAnimation = true;
    var numberOfTransitions = 5;
    $(‘#startGraphAnimation’).click(function () {
    $(‘#pauseGraphAnimation’).show();
    $(‘#startGraphAnimation’).hide();
    var dynamicDataPoints = [];
    yearCounter++;
    if (yearCounter >= yearArr.length) {
    yearCounter = 0;
    GDPPerCapitaBubbleChart = createGDPPerCapitaChart(getDataPoint(yearArr[yearCounter]));
    yearSlider.noUiSlider.set(yearArr[yearCounter]);
    }
    var nextDataPoints = getDataPoint(yearArr[yearCounter]);
    pauseAnimation = false;
    var animationInterval = setInterval(function(){
    if (animationIteration === 6) {
    orderedDataPoints = JSON.parse(JSON.stringify(dynamicDataPoints));
    animationIteration = 0;
    yearSlider.noUiSlider.set(yearArr[yearCounter]);
    yearCounter++;
    nextDataPoints = getDataPoint(yearArr[yearCounter]);
    if (yearCounter >= yearArr.length) {
    yearSlider.noUiSlider.set(yearArr[yearCounter]);
    orderedDataPoints = getDataPoint(yearArr[0]);
    clearInterval(animationInterval);
    pauseAnimation = true;
    $(‘#startGraphAnimation’).show();
    $(‘#pauseGraphAnimation’).hide();
    }
    if (pauseAnimation === true) {
    if (yearCounter !== yearArr.length – 1) {
    yearCounter–;
    }
    clearInterval(animationInterval);
    }
    }
    else{
    dynamicDataPoints = [];
    for (var j = 0; j < nextDataPoints.length; j++) {
    if (nextDataPoints[j].name !== orderedDataPoints[j].name) {
    orderedDataPoints.splice( j, 0, { x: 0.01, y : 0, z : 0, name: nextDataPoints[j].name } );
    }
    if (nextDataPoints[j].name === “India” || nextDataPoints[j].name === “China” || nextDataPoints[j].name === “United States”) {
    dynamicDataPoints.push({
    x: orderedDataPoints[j].x + (nextDataPoints[j].x – orderedDataPoints[j].x) * animationIteration / numberOfTransitions,
    y: orderedDataPoints[j].y + (nextDataPoints[j].y – orderedDataPoints[j].y) * animationIteration / numberOfTransitions,
    z: nextDataPoints[j].z,
    name: nextDataPoints[j].name,
    color: countryColor[nextDataPoints[j].name],
    cursor: “pointer”,
    indexLabel: countryCode[nextDataPoints[j].name],
    indexLabelFontColor: “#fbf3de”
    });
    } else {
    dynamicDataPoints.push({
    x: orderedDataPoints[j].x + (nextDataPoints[j].x – orderedDataPoints[j].x) * animationIteration / numberOfTransitions,
    y: orderedDataPoints[j].y + (nextDataPoints[j].y – orderedDataPoints[j].y) * animationIteration / numberOfTransitions,
    z: nextDataPoints[j].z,
    name: nextDataPoints[j].name,
    color: countryColor[nextDataPoints[j].name],
    cursor: “pointer”
    });
    }
    }
    GDPPerCapitaBubbleChart.options.data[0].dataPoints = JSON.parse(JSON.stringify(dynamicDataPoints));
    GDPPerCapitaBubbleChart.options.subtitles[0].text = yearArr[yearCounter];
    animationIteration++;
    }
    GDPPerCapitaBubbleChart.render();
    }, 35);
    });

    //pause the bubble chart animation and display the play button
    $(‘#pauseGraphAnimation’).click(function () {
    $(‘#startGraphAnimation’).show();
    $(‘#pauseGraphAnimation’).hide();
    pauseAnimation=true;
    });

    //Get the dataPoints for all the countries for the specific year
    function getDataPoint(year) {
    var dataPoints=[];
    $.each(economyData,function (countryName,categoryData) {
    if (typeof(categoryData[“GDPPerCapita”][year]) !== “undefined” && typeof(categoryData[“lifeExpectancy”][year]) !== “undefined” && typeof(categoryData[“population”][year]) !== “undefined”) {
    if (countryName === “India” || countryName === “China” || countryName === “United States”) {
    dataPoints.push({x: categoryData[“GDPPerCapita”][year], y: categoryData[“lifeExpectancy”][year], z: categoryData[“population”][year], name: countryName, color: countryColor[countryName], cursor: “pointer”,
    indexLabel: countryCode[countryName], indexLabelFontColor:”#fbf3de”});
    } else {
    dataPoints.push({x: categoryData[“GDPPerCapita”][year], y: categoryData[“lifeExpectancy”][year], z: categoryData[“population”][year], name: countryName, color: countryColor[countryName], cursor: “pointer”});
    }
    }
    });
    return JSON.parse(JSON.stringify(dataPoints));
    }

    //GDP per capita vs Life expectancy bubble chart
    function createGDPPerCapitaChart(dataPoints) {
    var GDPPerCapitaBubbleChart = new CanvasJS.Chart(“GDP-per-capita-bubble-chart”,
    {
    backgroundColor: “transparent”,
    axisX: {
    labelFontWeight: ‘lighter’,
    lineThickness: 1,
    logarithmic: true,
    minimum: 10,
    maximum: 70000,
    tickLength: 10,
    tickThickness: 1,
    title: “Testing For MauzoCRM”,
    titleFontColor: “#065f66”,
    valueFormatString: “$#,###”
    },
    axisY: {
    gridThickness: 1,
    labelFontWeight: ‘lighter’,
    lineThickness: 1,
    minimum: 30,
    maximum: 100,
    tickThickness: 1,
    tickLength: 10,
    title: “pebble softwares”,
    titleFontColor: “#065f66”,
    valueFormatString: “#,### yrs”
    },
    toolTip: {
    contentFormatter: function(e) {
    var content = “”;
    for (var i = 0; i < e.entries.length; i++) {
    content += “” + e.entries[i].dataPoint.name + “ <br/> GDP per capita: US $” + CanvasJS.formatNumber(e.entries[i].dataPoint.x,”#,###.##”) + ” <br/> Life Expectancy: ” +
    CanvasJS.formatNumber(e.entries[i].dataPoint.y,”#,###.##”) + ” yrs<br/> Population: “+formatTooltipNumber(e.entries[i].dataPoint.z);
    }
    return content;
    }
    },
    data: [
    {
    indexLabelPlacement: “outside”,
    legendMarkerType: “circle”,
    name: “Click a Bubble to see Agent Wise Progression”,
    showInLegend: true,
    type: “bubble”,
    click: showChartForSelectedCountry,
    dataPoints: dataPoints
    }
    ],
    subtitles: [
    {
    dockInsidePlotArea: true,
    fontColor: “rgba(50,30,150,0.1)”,
    fontSize: 126,
    text: yearArr[yearCounter],
    verticalAlign: “center”
    }
    ],
    });

    GDPPerCapitaBubbleChart.render();
    return GDPPerCapitaBubbleChart;
    }

    //On click of the bubble in the bubble chart it scrolls down to the chart of population, working population, and Merchandise import and export chart
    function showChartForSelectedCountry(e) {
    $(‘div #selected-country’).each(function(){
    $(this).html(‘ – ‘+e.dataPoint.name);
    });
    createPopulationChart(e.dataPoint.name);
    createWorkingPopulationChart(e.dataPoint.name);
    merchandiseImportsExportsColumnChart = createMerchandiseImportsExportsChart(e.dataPoint.name);
    setMerchandiseImportsExportsColumnChartAxisYTitleFontSize();
    $(‘html,body’).animate({scrollTop: $(“#population-charts”).offset().top},400);
    }

    //Set the subtitle of the bubble chart to display the year during the animation of the chart
    function setBubbleChartSubtitlesFontSize() {
    if ($(‘#GDP-per-capita-bubble-chart’).height() === 400) {
    GDPPerCapitaBubbleChart.options.subtitles[0].fontSize = 113;
    }
    if ($(‘#GDP-per-capita-bubble-chart’).height() === 300) {
    GDPPerCapitaBubbleChart.options.subtitles[0].fontSize = 60;
    }
    GDPPerCapitaBubbleChart.render();
    }

    //Initiate the slider
    function createSlider(startingYear) {
    noUiSlider.create(yearSlider, {
    start: startingYear,
    connect: “lower”,
    step: 1,
    animate: false,
    range: {
    ‘min’: yearArr[0],
    ‘max’: yearArr[yearArr.length-1]
    },
    pips: {
    mode: ‘values’,
    stepped: true,
    values: getYearArrForSlider(),
    density: 2
    }
    });
    }

    //Get the number of jumps to be taken for the year array as per the width of the slider
    function getYearJump(){
    var yearJumps = 0;
    if($(window).outerWidth() > 1800){
    yearJumps = 0;
    }
    if($(window).outerWidth() < 1800 && $(window).outerWidth() > 1000){
    yearJumps = 1;
    }
    if($(window).outerWidth() < 1000 && $(window).outerWidth() > 600){
    yearJumps = 2;
    }
    if($(window).outerWidth() < 600 && $(window).outerWidth() > 450){
    yearJumps = 3;
    }
    if($(window).outerWidth() < 450 && $(window).outerWidth() > 400){
    yearJumps = 4;
    }
    if($(window).outerWidth() < 400 && $(window).outerWidth() > 350){
    yearJumps = 5;
    }
    if($(window).outerWidth()<350){
    yearJumps = 6;
    }
    return yearJumps;
    }

    //Get the year array to be displayed on the slider scale
    function getYearArrForSlider() {
    var modifiedYearArr = [];
    for (var i = 0; i < yearArr.length; i++) {
    modifiedYearArr.push(yearArr[i]);
    i = i + getYearJump();
    }
    return modifiedYearArr;
    }

    //Bind click event on year slider
    function bindClickEventToSliderScale() {
    $(“.noUi-value”).click( function() {
    yearSlider.noUiSlider.updateOptions({
    range: {
    ‘min’: yearArr[0],
    ‘max’: yearArr[yearArr.length-1]
    },
    animate: true
    });
    yearSlider.noUiSlider.set($(this).html());
    yearSlider.noUiSlider.updateOptions({
    range: {
    ‘min’: yearArr[0],
    ‘max’: yearArr[yearArr.length-1]
    },
    animate: false
    });
    });
    }

    //Bind slider update event
    function bindYearSliderUpdateEvent() {
    yearSlider.noUiSlider.on(‘update’, function (values, handle) {
    $(“.noUi-value”).each( function () {
    if (parseInt($(this).html()) === parseInt(values[handle])) {
    $(this).addClass(‘noUi-value-large’);
    $(this).removeClass(‘noUi-value-sub’);
    $(this).prev().addClass(‘noUi-marker-large’);
    $(this).prev().removeClass(‘noUi-marker-sub’);
    } else {
    $(this).addClass(‘noUi-value-sub’);
    $(this).removeClass(‘noUi-value-large’);
    $(this).prev().addClass(‘noUi-marker-sub’);
    $(this).prev().removeClass(‘noUi-marker-large’);
    }
    });
    yearCounter = yearArr.indexOf(parseInt(values[handle]));
    if (pauseAnimation === true) {
    orderedDataPoints = getDataPoint(parseInt(values[handle]));
    GDPPerCapitaBubbleChart = createGDPPerCapitaChart(getDataPoint(parseInt(values[handle])));
    }
    });
    }

    //Population chart
    function createPopulationChart(selectedCountry) {
    var populationDataPoints = [];
    $.each(economyData[selectedCountry][“population”], function (year, population) {
    populationDataPoints.push({x: parseInt(year), y: population});
    });
    var populationAreaChart = new CanvasJS.Chart(“population-line-chart”,
    {
    animationEnabled: true,
    backgroundColor: “transparent”,
    axisX: {
    labelFontWeight: ‘lighter’,
    lineThickness: 1,
    tickThickness: 1,
    valueFormatString: “####”,
    viewportMinimum: yearArr[0],
    viewportMaximum: yearArr[yearArr.length-1],
    },
    axisY: {
    gridThickness: 1,
    includeZero: false,
    labelFontWeight: ‘lighter’,
    lineThickness: 1,
    labelFormatter: addSymbols,
    tickThickness: 1,
    title: “Population”,
    titleFontColor: “#065f66”
    },
    toolTip: {
    content: populationChartTooltipContent
    },
    data: [
    {
    markerSize: 0,
    name: “Population”,
    type: “splineArea”,
    xValueFormatString: “####”,
    dataPoints: populationDataPoints
    }
    ]
    });

    populationAreaChart.render();
    }

    // working population chart
    function createWorkingPopulationChart(selectedCountry) {
    var workingPopulationDataPoints = [];
    $.each(economyData[selectedCountry][“workingPopulation”], function (year, population) {
    workingPopulationDataPoints.push({x: parseInt(year), y: population});
    });
    var workingPopulationAreaChart = new CanvasJS.Chart(“working-population-line-chart”,
    {
    animationEnabled: true,
    backgroundColor: “transparent”,
    axisX: {
    labelFontWeight: ‘lighter’,
    lineThickness: 1,
    tickThickness: 1,
    valueFormatString: “####”,
    viewportMinimum: yearArr[0],
    viewportMaximum: yearArr[yearArr.length-1],
    },
    axisY: {
    gridThickness: 1,
    includeZero: false,
    labelFontWeight: ‘lighter’,
    lineThickness: 1,
    suffix: “%”,
    tickThickness: 1,
    title: “Working Age Population”,
    titleFontColor: “#065f66”
    },
    legend: {
    verticalAlign: “top”
    },
    toolTip: {
    content: “{x} <br/> {name}: {y}”
    },
    data: [
    {
    color: “#c24642”,
    markerSize: 0,
    name: “Working Age Population”,
    type: “splineArea”,
    xValueFormatString: “####”,
    yValueFormatString: “##.##’%'”,
    dataPoints: workingPopulationDataPoints
    }
    ]
    });
    workingPopulationAreaChart.render();
    }

    //Merchandise imports and exports chart
    function createMerchandiseImportsExportsChart(selectedCountry) {
    var merchandiseImportsDataPoints = [];
    var merchandiseExportsDataPoints = [];
    $.each(economyData[selectedCountry][“merchandiseImports”], function (year, population) {
    merchandiseImportsDataPoints.push({x: parseInt(year), y: population});
    });
    $.each(economyData[selectedCountry][“merchandiseExports”], function (year, population) {
    merchandiseExportsDataPoints.push({x: parseInt(year), y: population});
    });
    var merchandiseImportsExportsColumnChart = new CanvasJS.Chart(“merchandise-imports-exports-column-chart”,
    {
    animationEnabled: true,
    backgroundColor: “transparent”,
    axisX: {
    labelFontWeight: ‘lighter’,
    lineThickness: 1,
    tickThickness: 1,
    valueFormatString: “####”,
    },
    axisY: {
    gridThickness: 1,
    includeZero: false,
    labelFontWeight: ‘lighter’,
    labelFormatter: addSymbols,
    lineThickness: 1,
    tickThickness: 1,
    title: “Merchandise Imports & Exports”,
    titleFontColor: “#065f66”,
    titleFontSize: 30
    },
    legend: {
    cursor: “pointer”,
    verticalAlign: “top”,
    itemclick: function (e) {
    if (typeof (e.dataSeries.visible) === “undefined” || e.dataSeries.visible) {
    e.dataSeries.visible = false;
    setMerchandiseImportExportAxisYTitle(e);
    } else {
    e.dataSeries.visible = true;
    setMerchandiseImportExportAxisYTitle(e);
    }
    e.chart.render();
    }
    },
    toolTip: {
    shared: true,
    contentFormatter: merchandiseImportsExportsChartTooltipContent
    },
    data: [
    {
    name: “Merchandise Imports”,
    showInLegend: true,
    type: “column”,
    visible: true,
    dataPoints: merchandiseImportsDataPoints
    },
    {
    name: “Merchandise Exports”,
    showInLegend: true,
    type: “column”,
    visible: true,
    dataPoints: merchandiseExportsDataPoints
    }
    ]
    });
    merchandiseImportsExportsColumnChart.render();
    return merchandiseImportsExportsColumnChart;
    }

    function setMerchandiseImportsExportsColumnChartAxisYTitleFontSize() {
    if ($(‘#merchandise-imports-exports-column-chart’).height() === 500) {
    merchandiseImportsExportsColumnChart.options.axisY.titleFontSize = 30;
    }
    if ($(‘#merchandise-imports-exports-column-chart’).height() === 400) {
    merchandiseImportsExportsColumnChart.options.axisY.titleFontSize = 25;
    }
    if ($(‘#merchandise-imports-exports-column-chart’).height() === 300) {
    merchandiseImportsExportsColumnChart.options.axisY.titleFontSize = 16;
    }
    merchandiseImportsExportsColumnChart.render();
    }

    function addSymbols(e) {
    var suffixes = [“”, “K”, “M”, “B”, “T”];
    var order = Math.max(Math.floor(Math.log(e.value) / Math.log(1000)), 0);
    if (order > suffixes.length – 1)
    order = suffixes.length – 1;
    var suffix = suffixes[order];
    if (e.chart.options.data[0].name === “Merchandise Imports”) {
    return “$” + CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
    } else {
    return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
    }
    }

    function setMerchandiseImportExportAxisYTitle(e) {
    if (e.chart.options.data[0].visible === true ) {
    if (e.chart.options.data[1].visible === false) {
    e.chart.options.axisY.title = e.chart.options.data[0].name;
    } else {
    e.chart.options.axisY.title = ‘Merchandise Imports & Exports’;
    }
    } else {
    if (e.chart.options.data[1].visible === false) {
    e.chart.options.axisY.title = ”;
    } else {
    e.chart.options.axisY.title = e.chart.options.data[1].name;
    }
    }
    }

    function populationChartTooltipContent(e) {
    var content;
    content = “” + e.entries[0].dataPoint.x + “ <br/>” + e.chart.options.data[0].name + ‘: ‘ + formatTooltipNumber(e.entries[0].dataPoint.y);
    return content;
    }

    function merchandiseImportsExportsChartTooltipContent(e) {
    var content;
    if (e.chart.options.data[0].visible === true) {
    if (e.chart.options.data[1].visible === false) {
    content = “” + e.entries[0].dataPoint.x + “ <br/>” + “<span style= ‘color:” + e.entries[0].dataSeries.color + “‘> ” + “Merchandise Imports:</span> US $” + formatTooltipNumber(e.entries[0].dataPoint.y);
    } else {
    content = “” + e.entries[0].dataPoint.x + “ <br/>” + “<span style= ‘color:” + e.entries[0].dataSeries.color + “‘> ” + “Merchandise Imports:</span> US $” + formatTooltipNumber(e.entries[0].dataPoint.y)
    + “<br/><span style= ‘color:” + e.entries[1].dataSeries.color + “‘> ” + “Merchandise Exports:</span> US $”+ formatTooltipNumber(e.entries[1].dataPoint.y);
    }
    } else {
    if (e.chart.options.data[1].visible === false) {
    content = ”;
    } else {
    content = “” + e.entries[0].dataPoint.x + “” + “<br/><span style= ‘color:” + e.entries[1].dataSeries.color + “‘> “+ “Merchandise Exports:</span> US $” + formatTooltipNumber(e.entries[1].dataPoint.y);
    }
    }
    return content;
    }

    function formatTooltipNumber(number) {
    var suffixes = [“”, “Thousand”, “Million”, “Billion”, “Trillion”];
    var order = Math.max(Math.floor(Math.log(number) / Math.log(1000)), 0);
    if (order > suffixes.length – 1)
    order = suffixes.length – 1;
    var suffix = suffixes[order];
    return CanvasJS.formatNumber(number / Math.pow(1000, order)) + ‘ ‘ + suffix;
    }

    $(window).resize(function() {
    setBubbleChartSubtitlesFontSize();
    setMerchandiseImportsExportsColumnChartAxisYTitleFontSize();
    yearSlider.noUiSlider.destroy();
    createSlider(yearArr[yearCounter]);
    bindClickEventToSliderScale();
    bindYearSliderUpdateEvent();
    });

    (function init() {
    createSlider(yearArr[0]);
    bindClickEventToSliderScale();
    bindYearSliderUpdateEvent();
    GDPPerCapitaBubbleChart = createGDPPerCapitaChart(getDataPoint(yearArr[0]));
    createPopulationChart(“United States”);
    createWorkingPopulationChart(“United States”);
    merchandiseImportsExportsColumnChart = createMerchandiseImportsExportsChart(“United States”);
    setBubbleChartSubtitlesFontSize();
    setMerchandiseImportsExportsColumnChartAxisYTitleFontSize();
    })();

    });

    #25861

    @praveendb,

    Please take a look at this Gallery Demo for an example on rendering chart with data from database. You can also download PHP Samples from our download page and try it locally.


    Vishwas R
    Team CanvasJS

    #25864

    unless in this example bubble chart is a diffrent concept it does not contain datapoints like x and y axis so this will not work

    #25865

    @praveendb,

    In gallery example, it accepts x and y-values from database and pass it to chart options as array_push($dataPoints, array("x"=> $row->x, "y"=> $row->y));. Changing it to accept z-values array_push($dataPoints, array("x"=> $row->x, "y"=> $row->y, "z"=> $row->z)); and changing type to “bubble” should work fine for you.

    If you are still facing issue, kindly create sample project reproducing the issue you are facing and share it with us along with sample database over Google-Drive or Onedrive so that we can run it locally at our end, understand the scenario better and help you resolve.


    Vishwas R
    Team CanvasJS

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.