CODEWITHSUNDEEP
javascriptjquerycsshighcharts
Vikram Anand Bhushan
Vikram Anand Bhushan

Reputation: 4886

Trying to design with highChart but colors are not showing up

I am trying to create a Chart Like this sample

SampleChart

My code for creating the chart looks like this 

function makeGraph(title, x_axis, Target, Achieved) {
       $('#weekly').highcharts({
           chart: {
               type: 'line'
           },
           title: {
               text: title
           },
           subtitle: {
               text: 'Source: ide-global.com'
           },
           xAxis: {
               categories: x_axis
           },
           yAxis: {
               title: {
                   text: 'Money'
               }
           },
           plotOptions: {
               line: {
                   dataLabels: {
                       enabled: true
                   },
                   enableMouseTracking: false
               }
           },
           series: [{
               name: 'Target',
               data: Target
           }, {
               name: 'Achieved',
               data: Achieved
           }]
       });
   }

and My JsFiddle is here

Fiddle

Can any one let me know why the line in the chart is not coming up

Upvotes: 0

Views: 33

Answers (1)

Rotan075
Rotan075

Reputation: 2615

This is because you are feeding strings to the data object. If you console log your Target variable you will get this output:

["Week 1", 111111.11, 0, "Week 2", 111111.11, 0, "Week 3", 111111.11, 0, "Week 4", 111111.11, 200000, "Week 5", 111111.11, 0, "Week 6", 111111.11, 0, "Week 7", 111111.11, 0, "Week 8", 111111.11, 0, "Week 9", 111111.11, 200000]

HighChart can not handle string within the data object.

If you change this: mWeek = "Week " + i; to this: mWeek = i; then it will work.

See DEMO

Upvotes: 1

Related Questions