javascriptfusioncharts

Fusioncharts Real-time Line anchorbgclor


I want to use anchorBgColor attribute for Real-time Line chart. Real-time Line chart.

        function updateData() {
           var t = new Date(),
              date =
                 t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds(),
              val = Math.floor(Math.random() * (7800 - 7200 + 1)) + 7200,
              strData = "&label=" + date + "&value=" + val;

           // Feed it to chart.
           chartRef.feedData(strData);
        }

Could you recommend how to change anchorBgColor for this chart?


Solution

  • If you are wanting to have all the points the same color all you have to do is include the anchorBgColor property in the chart object

    {
    ...
      dataSource: {
        chart: {
          ...
          anchorBgColor: "#26aa5a"
        }
      }
    }
    
    

    If you want points to change colors as you add them you have manipulate the chart data object and use setJSONData rather than using the feedData method.

    <div id="chart-container">FusionCharts will render here</div>
    
    FusionCharts.ready(function() {
      var chartObj = new FusionCharts({
        type: 'line',
        renderAt: 'chart-container',
        id: 'myChart',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
          "chart": {
            "theme": "fusion",
            "anchorRadius": "6",
            "theme": "fusion"
    
          },
          "data": []
        }
      });
      chartObj.render();
    
        function pushNewPoint() {
        var t = new Date(),
            date =
            t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds(),
            val = Math.floor(Math.random() * (7800 - 7200 + 1)) + 7200,
            randomColor = Math.floor(Math.random()*16777215).toString(16)
    
        newEntry = {
          label: date,
          value: val,
          anchorBgColor: "#" + randomColor
        }
    
        chartData = chartObj.getChartData('json')
        chartData.data.push(newEntry)
    
        chartObj.setJSONData(chartData)
      }
      
      var counter = 0;
      var i = setInterval(function(){
          pushNewPoint()
    
          counter++;
          if(counter === 10) {
            clearInterval(i);
          }
        }, 1000);
    
    });
    

    Example can be seen here