title: Add Values to data under series dynamically - echarts
body: <p>I have created a Bar graph using echarts. I want to bind multiple values to data object dynamically, currently I'm able to bind only single value. here is my java script. I'mm a newbie for this, hoping for a fully functional solution. </p>
  
  <pre><code>var myChart = echarts.init(document.getElementById('page_views_today'));
  
      var option = {
  
          // Setup grid
          grid: {
              zlevel: 0,
              x: 20,
              x2: 40,
              y: 20,
              y2: 20,
              borderWidth: 0,
              backgroundColor: 'rgba(0,0,0,0)',
              borderColor: 'rgba(0,0,0,0)',
          },
  
          // Add tooltip
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow', // line|shadow
                  lineStyle: { color: 'rgba(0,0,0,.5)', width: 1 },
                  shadowStyle: { color: 'rgba(0,0,0,.1)' }
              }
          },
  
          // Add legend
          legend: {
              data: []
          },
          toolbox: {
              orient: 'vertical',
              show: true,
              showTitle: true,
              color: ['#bdbdbd', '#bdbdbd', '#bdbdbd', '#bdbdbd'],
              feature: {
                  mark: { show: false },
                  dataZoom: {
                      show: true,
                      title: {
                          dataZoom: 'Data Zoom',
                          dataZoomReset: 'Reset Zoom'
                      }
                  },
                  dataView: { show: false, readOnly: true },
                  magicType: {
                      show: true,
                      itemSize: 12,
                      itemGap: 12,
                      title: {
                          line: 'Line',
                          bar: 'Bar',
                      },
                      type: ['line', 'bar'],
                      option: {
                          /*line: {
                              itemStyle: {
                                normal: {
                                  color:'rgba(3,1,1,1.0)', 
                                }
                              },
                              data: [1,2,3,4,5,6,7,8,9,10,11,12]
                          }*/
                      }
                  },
                  restore: { show: false },
                  saveAsImage: { show: true, title: 'Save as Image' }
              }
          },
  
          // Enable drag recalculate
          calculable: true,
  
          // Horizontal axis
          xAxis: [{
              type: 'category',
              boundaryGap: false,
              data: [
                  '0h-2h', '2h-4h', '4h-6h', '6h-8h', '8h-10h', '10h-12h', '12h-14h', '14h-16h', '16h-18h', '18h-20h', '20h-22h', '22h-24h'
              ],
              axisLine: {
                  show: true,
                  onZero: true,
                  lineStyle: {
                      color: 'rgba(63,81,181,1.0)',
                      type: 'solid',
                      width: '2',
                      shadowColor: 'rgba(0,0,0,0)',
                      shadowBlur: 5,
                      shadowOffsetX: 3,
                      shadowOffsetY: 3,
                  },
              },
              axisTick: {
                  show: false,
              },
              splitLine: {
                  show: false,
                  lineStyle: {
                      color: '#fff',
                      type: 'solid',
                      width: 0,
                      shadowColor: 'rgba(0,0,0,0)',
                  },
              },
          }],
  
          // Vertical axis
          yAxis: [{
              type: 'value',
              splitLine: {
                  show: false,
                  lineStyle: {
                      color: 'fff',
                      type: 'solid',
                      width: 0,
                      shadowColor: 'rgba(0,0,0,0)',
                  },
              },
              axisLabel: {
                  show: false,
              },
              axisTick: {
                  show: false,
              },
              axisLine: {
                  show: false,
                  onZero: true,
                  lineStyle: {
                      color: '#ff0000',
                      type: 'solid',
                      width: '0',
                      shadowColor: 'rgba(0,0,0,0)',
                      shadowBlur: 5,
                      shadowOffsetX: 3,
                      shadowOffsetY: 3,
                  },
              },
  
  
          }],
  
          // Add series
          series: [
              {
                  name: 'Page Views',
                  type: 'bar',
                  smooth: true,
                  symbol: 'none',
                  symbolSize: 2,
                  showAllSymbol: true,
                  barWidth: 10,
                  itemStyle: {
                      normal: {
                          color: 'rgba(63,81,181,1.0)',
                          borderWidth: 2, borderColor: 'rgba(63,81,181,1)',
                          areaStyle: { color: 'rgba(63,81,181,1)', type: 'default' }
                      }
                  },
  
                  data: []
              }
          ]
      };
  </code></pre>
  
  <p>Here is my java-script function from where I want to bind the values dynamically.</p>
  
  <pre><code>    // Load data into the ECharts instance 
      load_graph_with_positions(option);
  
      function load_graph_with_positions(option) {
              option.series[0].data[0] = 1234;
          myChart.setOption(option);
      }
  </code></pre>